Satellite

Sleeping

App Files Files Community

Docfile commited on Dec 21, 2024

Commit

3ea01fd

verified ·

1 Parent(s): fb233ec

Update templates/svt.html

Browse files

Files changed (1) hide show

templates/svt.html +349 -361

templates/svt.html CHANGED Viewed

@@ -3,426 +3,414 @@
 <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');
         body {
-            font-family: 'Poppins', sans-serif;
-            background: linear-gradient(135deg, #f6f8fc 0%, #e9f0f7 100%);
         }
-        .animate-fade-in {
-            animation: fadeIn 0.5s ease-in;
         }
-        .animate-slide-up {
-            animation: slideUp 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; }
         }
-        .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;
         }
-        /* Responsive adjustments */
-        @media (max-width: 640px) {
-            .preview-container {
-                grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
-            }
-            .image-preview img {
-                height: 32 object-cover;
-            }
-            #historyContainer .grid {
-                grid-template-columns: repeat(1, minmax(0, 1fr));
-            }
         }
     </style>
 </head>
-<body class="min-h-screen flex items-center justify-center p-4 md:p-8">
-    <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>
-            <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">
-                <i class="fas fa-info-circle"></i>
-                <span>Guide d'utilisation</span>
-            </button>
-        </header>
-        <div class="space-y-8 animate-slide-up">
-            <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">
-                    <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">
-                    <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>
-                <!-- Conteneur des prévisualisations -->
-                <div id="previewContainer" class="preview-container mt-4">
-                    <!-- Les prévisualisations seront ajoutées ici -->
                 </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">
-                <i class="fas fa-paper-plane"></i>
-                Analyser
-            </button>
-            <div id="loader" class="hidden">
-                <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"></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">
-                    <i class="fas fa-copy"></i>
-                    Copier la réponse
-                </button>
-            </div>
         </div>
-        <!-- Historique des réponses déplacé ici -->
-        <div class="space-y-8 animate-slide-up">
-            <h2 class="text-2xl font-bold text-blue-900 mb-4">Historique des Réponses</h2>
-            <button onclick="clearLocalStorage()" class="bg-red-500 hover:bg-red-700 text-white px-4 py-2 rounded-lg">
-                Effacer l'historique
-            </button>
-            <div id="historyContainer">
-                <!-- L'historique des réponses sera affiché ici -->
             </div>
         </div>
-    </div>
-    <script>
-        let uploadedFiles = [];
-        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];
-                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';
-                    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">
-                                <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">
-                                <i class="fas fa-eye"></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);
-            }
-        }
-        function removeImage(imageId) {
-            const imageIndex = uploadedFiles.findIndex(file => {
-                const fileId = `img-${file.lastModified}-${uploadedFiles.indexOf(file)}`;
-                return fileId === imageId;
-            });
-            if (imageIndex !== -1) {
-                uploadedFiles.splice(imageIndex, 1);
-            }
-            const element = document.getElementById(imageId);
-            if (element) {
-                element.remove();
-            }
-        }
-        function previewImage(src) {
-            Swal.fire({
-                imageUrl: src,
-                imageAlt: 'Prévisualisation',
-                width: '80%',
-                showConfirmButton: false,
-                showCloseButton: true,
-                customClass: {
-                    image: 'max-h-[80vh] object-contain'
-                }
-            });
-        }
-        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>Rognez vos images pour ne garder que l'essentiel du sujet.</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();
-            Swal.fire({
-                icon: 'success',
-                title: 'Copié !',
-                text: 'La réponse a été copiée dans le presse-papiers.',
-                showConfirmButton: false,
-                timer: 1500,
-                customClass: {
-                    popup: 'animate-fade-in'
-                }
             });
-        }
-        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]);
             }
-            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>
-                `;
             } else {
-                const htmlContent = marked.parse(data.response);
-                responseDiv.innerHTML = htmlContent;
-                responseDiv.classList.add('animate-fade-in');
-                copyResponseContainer.classList.remove('hidden');
-                // Convertir les images en base64 avant de les sauvegarder
-                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);
-                displayHistory();
             }
-        }
-        // Fonctions pour la gestion du localStorage
-        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_')) {
-                    const data = JSON.parse(localStorage.getItem(key));
-                    responses.push(data);
-                }
-            }
-            return responses.sort((a, b) => new Date(b.timestamp) - new Date(a.timestamp));
-        }
-        function clearLocalStorage() {
-            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();
-        }
-        function displayHistory() {
-            const responses = loadResponsesFromLocalStorage();
-            const historyContainer = document.getElementById('historyContainer');
-            historyContainer.innerHTML = '';
-            if (responses.length === 0) {
-                historyContainer.innerHTML = '<p class="text-gray-500">Aucun historique disponible.</p>';
-                return;
-            }
-            const responseList = document.createElement('ul');
-            responseList.className = 'grid gap-4 md:grid-cols-2';
-            responses.forEach(response => {
-                const listItem = document.createElement('li');
-                listItem.className = 'bg-white p-4 rounded-lg shadow-md hover:shadow-lg transition duration-300';
-                const title = document.createElement('h4');
-                title.className = 'text-lg font-semibold text-blue-800 mb-2';
-                title.textContent = `${response.option} - ${new Date(response.timestamp).toLocaleString()}`;
-                listItem.appendChild(title);
-                const previewContainer = document.createElement('div');
-                previewContainer.className = 'flex gap-2 mb-2';
-                response.images.forEach(imageData => {
-                    const img = document.createElement('img');
-                    img.src = imageData;
-                    img.className = 'h-12 w-12 object-cover rounded-md cursor-pointer';
-                    img.onclick = () => previewImage(imageData);
-                    previewContainer.appendChild(img);
-                });
-                listItem.appendChild(previewContainer);
-                const responsePreview = document.createElement('p');
-                responsePreview.className = 'text-gray-600 text-sm';
-                responsePreview.textContent = response.response.substring(0, 200) + (response.response.length > 200 ? '...' : '');
-                listItem.appendChild(responsePreview);
-                const viewButton = document.createElement('button');
-                viewButton.className = 'bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg mt-2 text-sm';
-                viewButton.textContent = 'Voir';
-                viewButton.onclick = () => {
-                    document.getElementById('response').innerHTML = marked.parse(response.response);
-                    document.getElementById('copyResponseContainer').classList.remove('hidden');
-                    window.scrollTo({ top: document.getElementById('response').offsetTop, behavior: 'smooth' });
-                };
-                listItem.appendChild(viewButton);
-                responseList.appendChild(listItem);
-            });
-            historyContainer.appendChild(responseList);
-        }
-        displayHistory();
     </script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Analyse Satellite Avancée</title>
     <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        'primary-camo': '#5a6249', // Vert olive foncé
+                        'secondary-camo': '#1e293b', // Comme avant
+                        'camo-green': '#4a5538', // Vert olive moyen
+                        'camo-brown': '#6d5835', // Brun terre
+                        'camo-tan': '#d2b48c', // Beige sable (facultatif, pour un contraste plus clair)
+                    },
+                    animation: {
+                        'gradient': 'gradient 8s linear infinite',
+                        'spinner': 'spin 1.5s linear infinite',
+                    },
+                    keyframes: {
+                        gradient: {
+                            '0%, 100%': {
+                                'background-size': '200% 200%',
+                                'background-position': 'left center'
+                            },
+                            '50%': {
+                                'background-size': '200% 200%',
+                                'background-position': 'right center'
+                            }
+                        },
+                        spin: {
+                            '0%': { transform: 'rotate(0deg)' },
+                            '100%': { transform: 'rotate(360deg)' }
+                        }
+                    }
+                }
+            }
+        }
+    </script>
     <style>
+        /* Camouflage Background */
         body {
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%235a6249' fill-opacity='0.4'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+            background-size: 200px 200px; /* Ajustez la taille du motif selon vos préférences */
         }
+        .gradient-animate {
+            background: linear-gradient(270deg, #5a6249, #4a5538);
+            background-size: 200% 200%;
+            animation: gradient 8s ease infinite;
         }
+        .card-hover {
+            transition: transform 0.3s ease-in-out;
+            background-color: rgba(255, 255, 255, 0.8); /* Légère transparence pour les cartes */
         }
+        .card-hover:hover {
+            transform: translateY(-5px);
+        }
+        .progress-bar {
+            width: 0%;
+            transition: width 0.5s ease-in-out;
         }
+        .loader {
+            border: 8px solid #f3f3f3;
+            border-top: 8px solid #5a6249;
+            border-radius: 50%;
+            width: 60px;
+            height: 60px;
+            animation: spin 1.5s linear infinite;
+            display: none; /* Initially hidden */
+            margin: 20px auto;
         }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
         }
+        .fade-in {
+            opacity: 0;
+            animation: fadeIn 1s ease-in-out forwards;
         }
+        @keyframes fadeIn {
+            to {
+                opacity: 1;
+            }
         }
+        .slide-up {
+            transform: translateY(50px);
+            opacity: 0;
+            transition: transform 0.8s ease-out, opacity 0.8s ease-out;
         }
+        .slide-up.active {
+            transform: translateY(0);
             opacity: 1;
         }
+        #imagePreview {
+            max-width: 100%;
+            max-height: 300px;
+            margin-top: 20px;
+            display: none;
         }
+        /* Style pour les éléments de texte importants */
+        .text-camo-green {
+            color: #4a5538;
         }
+        .text-camo-brown {
+            color: #6d5835;
+        }
+        .text-camo-tan {
+            color: #d2b48c;
+        }
+         nav, footer{
+             background-color: #5a6249 !important;
+         }
+        nav span, footer h3, footer a, footer p{
+            color: #d2b48c !important;
         }
     </style>
 </head>
+<body class="min-h-screen">
+    <!-- Barre de Navigation -->
+    <nav class="shadow-lg fixed w-full z-50">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex justify-between h-16">
+                <div class="flex items-center">
+                    <span class="text-xl font-bold">SatelliteAI</span>
                 </div>
+                <div class="flex items-center space-x-4">
+                    <a href="https://github.com/Yusufibin" target="_blank"
+                       class="flex items-center space-x-2 hover:text-primary-camo transition-colors">
+                        <i class="fab fa-github text-xl"></i>
+                        <span>GitHub</span>
+                    </a>
                 </div>
             </div>
         </div>
+    </nav>
+    <!-- Hero Section -->
+    <header class="pt-24 pb-12 gradient-animate">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center text-camo-tan">
+            <h1 class="text-4xl font-bold mb-4">Reconnaissance d'Objets Satellite</h1>
+            <p class="text-xl mb-8">Analyse avancée d'images satellite alimentée par l'IA</p>
+            <div class="flex justify-center space-x-4">
+                <a href="#upload" class="bg-camo-tan text-primary-camo px-6 py-3 rounded-lg font-medium hover:bg-camo-brown hover:text-camo-tan transition-colors">
+                    Commencer l'analyse
+                </a>
+                <a href="#about" class="border border-camo-tan text-camo-tan px-6 py-3 rounded-lg font-medium hover:bg-camo-tan hover:text-primary-camo transition-colors">
+                    En savoir plus
+                </a>
             </div>
         </div>
+    </header>
+    <main class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
+        <!-- Section À propos -->
+        <section id="about" class="mb-16">
+            <div class="grid md:grid-cols-2 gap-8">
+                <div class="card-hover bg-white rounded-xl shadow-lg p-6 slide-up">
+                    <h2 class="text-2xl font-bold text-camo-green mb-4">À propos du projet</h2>
+                    <p class="text-camo-brown mb-4">
+                        Ce système utilise l'API Gemini pour analyser des images satellite et détecter automatiquement les objets présents.
+                        Il combine la puissance du deep learning avec une interface utilisateur intuitive pour fournir des analyses détaillées
+                        et précises des images satellite.
+                    </p>
+                    <ul class="space-y-2 text-camo-brown">
+                        <li class="flex items-center">
+                            <i class="fas fa-check text-camo-green mr-2"></i>
+                            Détection d'objets en temps réel
+                        </li>
+                        <li class="flex items-center">
+                            <i class="fas fa-check text-camo-green mr-2"></i>
+                            Analyse détaillée du contenu
+                        </li>
+                        <li class="flex items-center">
+                            <i class="fas fa-check text-camo-green mr-2"></i>
+                            Interface utilisateur moderne
+                        </li>
+                    </ul>
+                </div>
+                <div class="card-hover bg-white rounded-xl shadow-lg p-6 slide-up">
+                    <h2 class="text-2xl font-bold text-camo-green mb-4">Technologies utilisées</h2>
+                    <div class="grid grid-cols-2 gap-4">
+                        <div class="flex items-center space-x-2">
+                            <i class="fab fa-python text-2xl text-blue-500"></i>
+                            <span class="text-camo-brown">Python/Flask</span>
                         </div>
+                        <div class="flex items-center space-x-2">
+                            <i class="fab fa-js text-2xl text-yellow-500"></i>
+                            <span class="text-camo-brown">JavaScript</span>
                         </div>
+                        <div class="flex items-center space-x-2">
+                            <i class="fab fa-google text-2xl text-primary-camo"></i>
+                            <span class="text-camo-brown">Gemini API</span>
+                        </div>
+                        <div class="flex items-center space-x-2">
+                            <i class="fab fa-css3 text-2xl text-blue-400"></i>
+                            <span class="text-camo-brown">Tailwind CSS</span>
                         </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- Section Upload -->
+        <section id="upload" class="mb-16">
+            <div class="card-hover bg-white rounded-xl shadow-lg p-8 slide-up">
+                <h2 class="text-2xl font-bold text-camo-green mb-6">Analyse d'image</h2>
+                <div class="border-2 border-dashed border-gray-300 rounded-lg p-8 transition-colors hover:border-primary-camo">
+                    <form id="uploadForm" class="space-y-6">
+                        <div class="text-center">
+                            <i class="fas fa-satellite text-5xl text-primary-camo mb-4"></i>
+                            <div class="mt-4">
+                                <label class="block text-lg font-medium text-camo-brown mb-2">
+                                    Sélectionner une image satellite
+                                </label>
+                                <input type="file" id="fileInput"
+                                       class="mt-1 block w-full text-sm text-gray-500
+                                              file:mr-4 file:py-2 file:px-4
+                                              file:rounded-full file:border-0
+                                              file:text-sm file:font-semibold
+                                              file:bg-primary-camo file:text-camo-tan
+                                              hover:file:bg-camo-green
+                                              transition-colors"
+                                       accept="image/*">
+                                <img id="imagePreview" src="#" alt="Prévisualisation de l'image" />
+                            </div>
                         </div>
+                        <div class="flex justify-center">
+                            <button type="submit" class="bg-primary-camo text-camo-tan px-8 py-3 rounded-full font-semibold hover:bg-camo-green transition-colors">
+                                Lancer l'analyse
+                            </button>
                         </div>
+                        <div id="loader" class="loader"></div>
+                    </form>
+                </div>
+            </div>
+        </section>
+        <!-- Section Résultats -->
+        <section id="results" class="opacity-0">
+            <div class="grid md:grid-cols-2 gap-8">
+                <div class="card-hover bg-white rounded-xl shadow-lg p-6 slide-up">
+                    <h3 class="text-xl font-bold text-camo-green mb-4">Objets Détectés</h3>
+                    <div id="detectedObjects" class="space-y-3">
+                        <!-- Les résultats seront insérés ici -->
                     </div>
+                </div>
+                <div class="card-hover bg-white rounded-xl shadow-lg p-6 slide-up">
+                    <h3 class="text-xl font-bold text-camo-green mb-4">Description Détaillée</h3>
+                    <div id="description" class="prose text-camo-brown">
+                        <!-- La description sera insérée ici -->
+                    </div>
+                </div>
+            </div>
+        </section>
+    </main>
+    <!-- Footer -->
+    <footer class="text-camo-tan py-8 mt-16">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex justify-between items-center">
+                <div>
+                    <h3 class="text-lg font-semibold">SatelliteAI</h3>
+                    <p class="text-gray-400">Développé par Yusufibin</p>
+                </div>
+                <div>
+                    <a href="https://github.com/Yusufibin" target="_blank"
+                       class="hover:text-camo-brown transition-colors">
+                        <i class="fab fa-github text-2xl"></i>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </footer>
+    <script>
+        // Initialisation de GSAP ScrollTrigger
+        gsap.registerPlugin(ScrollTrigger);
+        // Animations au chargement
+        gsap.from("header", {
+            opacity: 0,
+            y: -50,
+            duration: 1,
+            ease: "power3.out"
+        });
+        // Animations au scroll
+        gsap.utils.toArray(".slide-up").forEach((el, index) => {
+            gsap.from(el, {
+                scrollTrigger: {
+                    trigger: el,
+                    start: "top bottom-=100",
+                    onEnter: () => {
+                        el.classList.add("active");
+                    },
+                },
             });
+        });
+        // Prévisualisation de l'image
+        const fileInput = document.getElementById('fileInput');
+        const imagePreview = document.getElementById('imagePreview');
+        fileInput.addEventListener('change', function(e) {
+            const file = e.target.files[0];
+            const reader = new FileReader();
+            reader.onload = function(e) {
+                imagePreview.src = e.target.result;
+                imagePreview.style.display = 'block';
             }
+            if (file) {
+                reader.readAsDataURL(file);
             } else {
+                imagePreview.src = '#';
+                imagePreview.style.display = 'none';
             }
+        });
+        // Gestion du formulaire
+        document.getElementById('uploadForm').addEventListener('submit', async function(e) {
+            e.preventDefault();
+            const fileInput = document.getElementById('fileInput');
+            const loader = document.getElementById('loader');
+            const resultsSection = document.getElementById('results');
+            const detectedObjectsDiv = document.getElementById('detectedObjects');
+            const descriptionDiv = document.getElementById('description');
+            // Vérifier si un fichier a été sélectionné
+            if (!fileInput.files[0]) {
+                alert('Veuillez sélectionner une image.');
+                return;
             }
+            // Afficher le loader
+            loader.style.display = 'block';
+            // Simulation de l'analyse (à remplacer par votre API)
+            // Attendre 3 secondes pour simuler une analyse longue
+            await new Promise(resolve => setTimeout(resolve, 3000));
+            // Masquer le loader
+            loader.style.display = 'none';
+            // Afficher la section résultats avec une animation
+            resultsSection.classList.add('fade-in');
+            // Simulation des résultats (à remplacer par les résultats de votre API)
+            detectedObjectsDiv.innerHTML = `
+                <div class="space-y-2 animate-pulse">
+                    <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
+                        <span class="text-camo-brown">Bâtiments</span>
+                        <div class="w-32 bg-gray-200 rounded-full h-2">
+                            <div class="bg-primary-camo h-2 rounded-full progress-bar" style="width: 85%"></div>
+                        </div>
+                    </div>
+                    <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
+                        <span class="text-camo-brown">Routes</span>
+                        <div class="w-32 bg-gray-200 rounded-full h-2">
+                            <div class="bg-primary-camo h-2 rounded-full progress-bar" style="width: 70%"></div>
+                        </div>
+                    </div>
+                    <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
+                        <span class="text-camo-brown">Végétation</span>
+                        <div class="w-32 bg-gray-200 rounded-full h-2">
+                            <div class="bg-primary-camo h-2 rounded-full progress-bar" style="width: 90%"></div>
+                        </div>
+                    </div>
+                    <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
+                        <span class="text-camo-brown">Eau</span>
+                        <div class="w-32 bg-gray-200 rounded-full h-2">
+                            <div class="bg-primary-camo h-2 rounded-full progress-bar" style="width: 60%"></div>
+                        </div>
+                    </div>
+                    <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
+                        <span class="text-camo-brown">Véhicules</span>
+                        <div class="w-32 bg-gray-200 rounded-full h-2">
+                            <div class="bg-primary-camo h-2 rounded-full progress-bar" style="width: 50%"></div>
+                        </div>
+                    </div>
+                </div>
+            `;
+            descriptionDiv.innerHTML = "<p class='text-camo-brown'>Analyse détaillée de l'image satellite. La détection a permis d'identifier plusieurs types d'objets avec une grande précision.</p>";
+            // Animer les barres de progression
+            setTimeout(() => {
+                document.querySelectorAll('.progress-bar').forEach(bar => {
+                    bar.style.width = bar.parentElement.dataset.value || '75%';
+                });
+            }, 100);
+        });
     </script>
 </body>
 </html>