Update templates/static_deploy.html

templates/static_deploy.html

@@ -107,78 +107,148 @@
 @keyframes spinner-border {
     to { transform: rotate(360deg); }
 }
+
+/* -------------------------------------- */
+/* Styles du Mode Sombre                  */
+/* -------------------------------------- */
+
+/* Le corps principal devient sombre */
+body.dark-mode {
+    background-color: #1a1a1a;
+    color: #f1f1f1;
+}
+
+/* Conteneurs et cartes (e.g., action-zone, url-container) */
+.dark-mode .bg-white { 
+    background-color: #2c2c2c !important; 
+    color: #f1f1f1;
+}
+
+/* Zone de Drop */
+.dark-mode .dropzone {
+    border-color: #00bcd4; /* Cyan pour le contraste */
+    background-color: #2c2c2c;
+}
+.dark-mode .dropzone.dragover {
+    background-color: #404040;
+    border-color: #00e5ff;
+}
+.dark-mode .dropzone-icon, .dark-mode .file-icon {
+    color: #00bcd4;
+}
+.dark-mode .dropzone-text {
+    color: #f1f1f1;
+}
+.dark-mode .dropzone-hint {
+    color: #ccc;
+}
+
+/* Liste de fichiers */
+.dark-mode .file-list li {
+    border-bottom: 1px solid #444;
+}
+
+/* Statut de téléversement */
+.dark-mode .text-muted {
+    color: #b0b0b0 !important;
+}
+
+/* Couleurs des URL (Ajustement pour le fond sombre) */
+.dark-mode #permanent-url-container {
+    background-color: #0f5132 !important; /* Vert foncé */
+    border-color: #198754 !important;
+}
+.dark-mode .text-success {
+    color: #92b8aa !important; /* Vert clair */
+}
+
+.dark-mode #temp-url-container {
+    background-color: #664d03 !important; /* Jaune foncé */
+    border-color: #ffc107 !important;
+}
+.dark-mode .text-warning {
+    color: #ffd700 !important; /* Jaune clair */
+}
 </style>
 
+<div class="d-flex justify-content-end p-3">
+    <button id="theme-toggle" class="btn btn-outline-secondary" title="Changer le thème">
+        <span id="theme-icon" class="material-symbols-rounded">dark_mode</span>
+    </button>
+</div>
+
 <input type="file" id="file-input" multiple style="display: none;">
 
 
-<div class="container my-5">
-    <div class="row">
-        <div class="col-12 col-lg-8 mx-auto">
-            <h2 class="text-center mb-4"> Déploiement Statique Instantané</h2>
-            
-            <div id="drop-zone" class="dropzone">
-                <span class="material-symbols-rounded dropzone-icon">cloud_upload</span>
-                <p class="dropzone-text">Glissez et déposez vos fichiers ici (HTML, CSS, JS, Images)</p>
-                <p class="dropzone-hint">Ou cliquez pour sélectionner des fichiers. Un fichier index.html est requis.</p>
-                <button id="select-files-button" class="btn btn-outline-primary mt-3">Sélectionner des Fichiers</button>
-            </div>
+<div class="container my-5 mx-auto px-4 lg:px-0">
+    <div class="col-12 col-lg-8 mx-auto">
+        <h2 class="text-center mb-4 text-3xl font-bold"> Déploiement Statique Instantané</h2>
+        
+        <div id="drop-zone" class="dropzone" data-is-dropping="false">
+            <span class="material-symbols-rounded dropzone-icon">cloud_upload</span>
+            <p class="dropzone-text">Glissez et déposez vos fichiers ici (HTML, CSS, JS, Images)</p>
+            <p class="dropzone-hint">Ou cliquez pour sélectionner des fichiers. Un fichier **index.html** est requis.</p>
+            <button id="select-files-button" class="btn bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded mt-3">Sélectionner des Fichiers</button>
+        </div>
 
-            <div id="file-upload-status" class="mt-3 text-muted">
-                Aucun fichier téléversé.
-            </div>
+        <div id="file-upload-status" class="mt-3 text-muted text-center">
+            Aucun fichier téléversé.
+        </div>
 
-            <ul id="uploaded-file-list" class="file-list p-3 border rounded shadow-sm bg-white" style="display: none;">
-                </ul>
-            
-            <div id="action-zone" class="mt-4 p-4 border rounded shadow-sm bg-white">
-                <div class="d-flex justify-content-between align-items-center">
-                    <button id="launch-button" class="btn btn-info me-2" disabled>
-                        <span class="material-symbols-rounded align-middle me-1">open_in_new</span> Lancer l'Aperçu (Temp)
-                    </button>
-                    
-                    <button id="deploy-button" class="btn btn-success me-2" disabled>
-                        <span class="material-symbols-rounded align-middle me-1">cloud_upload</span> Déployer le Site Web (Permanent)
-                    </button>
-                    
-                    <button id="clear-button" class="btn btn-danger" disabled>
-                        <span class="material-symbols-rounded align-middle me-1">delete_forever</span> Vider
-                    </button>
-                </div>
+        <ul id="uploaded-file-list" class="file-list p-3 border rounded shadow-sm bg-white" style="display: none;">
+            </ul>
+        
+        <div id="action-zone" class="mt-4 p-4 border rounded shadow-sm bg-white">
+            <div class="flex flex-wrap justify-between items-center space-y-2 md:space-y-0">
+                <button id="launch-button" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded flex items-center" disabled>
+                    <span class="material-symbols-rounded align-middle me-1">open_in_new</span> Lancer l'Aperçu (Temp)
+                </button>
+                
+                <button id="deploy-button" class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded flex items-center" disabled>
+                    <span class="material-symbols-rounded align-middle me-1">cloud_upload</span> Déployer le Site Web (Permanent)
+                </button>
+                
+                <button id="clear-button" class="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded flex items-center" disabled>
+                    <span class="material-symbols-rounded align-middle me-1">delete_forever</span> Vider
+                </button>
             </div>
+        </div>
 
-            <div id="permanent-url-container" class="mt-4 p-3 bg-success-light border rounded" style="display: none; background-color: #d1e7dd !important; border-color: #badbcc !important;">
-                <label class="form-label fw-bold d-block text-success" style="color: #0f5132 !important;"> 
-                    <span class="material-symbols-rounded align-middle me-1">link</span> Lien Permanent du Site
-                </label>
-                <div class="input-group mb-2">
-                    <input type="text" id="permanent-url-display" class="form-control" readonly value="">
-                    <button class="btn btn-outline-secondary" type="button" id="copy-permanent-button" title="Copier le lien permanent">
-                        <span class="material-symbols-rounded">content_copy</span>
-                    </button>
-                </div>
-                <small class="text-muted mt-1 d-block" style="color: #0f5132 !important;"> ✅ Ce lien est sauvegardé sur Hugging Face et est permanent. </small>
+        <div id="permanent-url-container" class="mt-4 p-3 bg-success-light border rounded" style="display: none; background-color: #d1e7dd !important; border-color: #badbcc !important;">
+            <label class="font-bold d-block text-success" style="color: #0f5132 !important;"> 
+                <span class="material-symbols-rounded align-middle me-1">link</span> Lien Permanent du Site
+            </label>
+            <div class="flex mt-2">
+                <input type="text" id="permanent-url-display" class="w-full p-2 border rounded-l" readonly value="">
+                <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-3 rounded-r" type="button" id="copy-permanent-button" title="Copier le lien permanent">
+                    <span class="material-symbols-rounded">content_copy</span>
+                </button>
             </div>
-            
-            <div id="temp-url-container" class="mt-4 p-3 bg-light border rounded" style="display: none; background-color: #fff3cd !important; border-color: #ffc107 !important;">
-                <label class="form-label fw-bold d-block text-warning" style="color: #664d03 !important;"> 
-                    <span class="material-symbols-rounded align-middle me-1">share</span> Lien d'Aperçu Temporaire 
-                </label>
-                <div class="input-group mb-2">
-                    <input type="text" id="temp-url-display" class="form-control" readonly value="{{ temp_launch_url if temp_launch_url else '' }}">
-                    <button class="btn btn-outline-secondary" type="button" id="copy-temp-button" title="Copier le lien temporaire">
-                        <span class="material-symbols-rounded">content_copy</span>
-                    </button>
-                </div>
-                <small class="text-muted mt-1 d-block"> ⚠️ Ce lien est temporaire. Cliquez sur "Déployer le Site Web" pour le rendre permanent. </small>
+            <small class="mt-1 d-block" style="color: #0f5132 !important;"> ✅ Ce lien est sauvegardé sur Hugging Face et est permanent. </small>
+        </div>
+        
+        <div id="temp-url-container" class="mt-4 p-3 bg-light border rounded" style="display: none; background-color: #fff3cd !important; border-color: #ffc107 !important;">
+            <label class="font-bold d-block text-warning" style="color: #664d03 !important;"> 
+                <span class="material-symbols-rounded align-middle me-1">share</span> Lien d'Aperçu Temporaire 
+            </label>
+            <div class="flex mt-2">
+                <input type="text" id="temp-url-display" class="w-full p-2 border rounded-l" readonly value="{{ temp_launch_url if temp_launch_url else '' }}">
+                <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-3 rounded-r" type="button" id="copy-temp-button" title="Copier le lien temporaire">
+                    <span class="material-symbols-rounded">content_copy</span>
+                </button>
             </div>
-            
+            <small class="mt-1 d-block"> ⚠️ Ce lien est temporaire. Cliquez sur "**Déployer le Site Web**" pour le rendre permanent. </small>
         </div>
+        
     </div>
 </div>
 
 <script>
 // Récupération des éléments du DOM
+const body = document.body;
+const themeToggle = document.getElementById('theme-toggle');
+const themeIcon = document.getElementById('theme-icon');
+
 const dropZone = document.getElementById('drop-zone');
 const fileInput = document.getElementById('file-input');
 const selectFilesButton = document.getElementById('select-files-button');
@@ -186,7 +256,7 @@ const uploadStatus = document.getElementById('file-upload-status');
 const uploadedFileList = document.getElementById('uploaded-file-list');
 const launchButton = document.getElementById('launch-button');
 const clearButton = document.getElementById('clear-button');
-const deployButton = document.getElementById('deploy-button'); // Le bouton Commit Change
+const deployButton = document.getElementById('deploy-button'); 
 
 const permanentUrlContainer = document.getElementById('permanent-url-container');
 const permanentUrlInput = document.getElementById('permanent-url-display');
@@ -196,19 +266,24 @@ const tempUrlContainer = document.getElementById('temp-url-container');
 const tempUrlInput = document.getElementById('temp-url-display');
 const copyTempButton = document.getElementById('copy-temp-button');
 
+let selectedFiles = []; // Stocke les fichiers à téléverser
+
 // Données injectées par Flask (Assurez-vous que votre route Flask passe ces variables)
-const currentTempUrl = '{{ temp_launch_url if temp_launch_url else "" }}';
-const currentPermanentUrl = '{{ permanent_deployment_url if permanent_deployment_url else "" }}';
-const indexFilePresent = {{ 'true' if 'index.html' in files else 'false' }};
-const fileCount = {{ files|length }};
+let currentTempUrl = '{{ temp_launch_url if temp_launch_url else "" }}';
+let currentPermanentUrl = '{{ permanent_deployment_url if permanent_deployment_url else "" }}';
+let initialIndexFilePresent = {{ 'true' if 'index.html' in files else 'false' }};
+let initialFileCount = {{ files|length }};
 const deployId = '{{ deploy_id }}'; 
-const files = JSON.parse('{{ files | tojson | safe }}'); // Liste des fichiers pour l'affichage initial
+const initialFiles = JSON.parse('{{ files | tojson | safe }}'); 
+
+// État initial de l'interface
+let currentIndexFilePresent = initialIndexFilePresent;
 
 // -------------------------------------------------------------
 // --- Fonctions d'Utilitaires et de Mise à Jour de l'Interface ---
 // -------------------------------------------------------------
 
-/** Affiche la liste des fichiers téléversés */
+/** Affiche la liste des fichiers téléversés ou en attente */
 function renderFileList(fileList) {
     uploadedFileList.innerHTML = '';
     if (fileList.length === 0) {
@@ -224,41 +299,232 @@ function renderFileList(fileList) {
     uploadedFileList.style.display = 'block';
 }
 
-/** Met à jour l'état initial des éléments au chargement de la page */
-function updateInitialState() {
-    renderFileList(files);
+/** Met à jour l'état des boutons et des URL */
+function updateUIState() {
+    clearButton.disabled = initialFileCount === 0 && selectedFiles.length === 0;
 
     if (currentPermanentUrl) {
         // État final: URL permanente
         permanentUrlInput.value = currentPermanentUrl;
         permanentUrlContainer.style.display = 'block';
+        tempUrlContainer.style.display = 'none';
+        
         deployButton.disabled = true; 
         deployButton.innerHTML = '<span class="material-symbols-rounded align-middle me-1">cloud_done</span> Déployé !';
-        deployButton.classList.remove('btn-success');
-        deployButton.classList.add('btn-secondary'); 
+        deployButton.classList.remove('bg-green-500', 'hover:bg-green-600');
+        deployButton.classList.add('bg-gray-500', 'cursor-not-allowed'); 
         launchButton.disabled = false;
-        tempUrlContainer.style.display = 'none';
-    } else if (currentTempUrl && indexFilePresent) {
+        
+        uploadStatus.textContent = `Site déployé (${initialFileCount} fichiers).`;
+        uploadStatus.className = 'mt-3 text-success fw-bold text-center';
+        
+    } else if (currentTempUrl && currentIndexFilePresent) {
         // État temporaire: prêt à être déployé
-        tempUrlInput.value = currentTempUrl; // Assurer que l'input a la valeur
+        tempUrlInput.value = currentTempUrl; 
         tempUrlContainer.style.display = 'block';
+        permanentUrlContainer.style.display = 'none';
+        
         deployButton.disabled = false;
+        deployButton.innerHTML = '<span class="material-symbols-rounded align-middle me-1">cloud_upload</span> Déployer le Site Web (Permanent)';
+        deployButton.classList.remove('bg-gray-500', 'cursor-not-allowed');
+        deployButton.classList.add('bg-green-500', 'hover:bg-green-600'); 
         launchButton.disabled = false;
-        permanentUrlContainer.style.display = 'none';
+        
+        uploadStatus.textContent = `Fichiers téléversés temporairement (${initialFileCount} fichiers. Index.html: Oui). Cliquez sur "Déployer" pour rendre permanent.`;
+        uploadStatus.className = 'mt-3 text-info fw-bold text-center';
+
     } else {
         // Aucun fichier ou index.html manquant
-        deployButton.disabled = true; 
-        launchButton.disabled = true;
         tempUrlContainer.style.display = 'none';
         permanentUrlContainer.style.display = 'none';
+        
+        deployButton.disabled = true; 
+        deployButton.innerHTML = '<span class="material-symbols-rounded align-middle me-1">cloud_upload</span> Déployer le Site Web (Permanent)';
+        deployButton.classList.remove('bg-green-500', 'hover:bg-green-600');
+        deployButton.classList.add('bg-gray-500', 'cursor-not-allowed'); 
+        launchButton.disabled = true;
+
+        if (selectedFiles.length > 0) {
+            uploadStatus.textContent = `Prêt à téléverser (${selectedFiles.length} fichiers). Index.html: ${currentIndexFilePresent ? 'Oui' : 'Non'}.`;
+            uploadStatus.className = 'mt-3 text-muted text-center';
+        } else {
+             uploadStatus.textContent = "Aucun fichier téléversé.";
+             uploadStatus.className = 'mt-3 text-muted text-center';
+        }
+    }
+}
+
+/** Initialise l'état au chargement de la page */
+function updateInitialState() {
+    renderFileList(initialFiles);
+    updateUIState();
+    loadTheme(); // Appliquer le thème sauvegardé
+}
+
+
+// -------------------------------------------------------------
+// --- Logique du Mode Sombre/Clair ---
+// -------------------------------------------------------------
+
+/** Change l'icône et la classe du corps */
+function toggleTheme() {
+    const isDarkMode = body.classList.toggle('dark-mode');
+    if (isDarkMode) {
+        themeIcon.textContent = 'light_mode';
+        localStorage.setItem('theme', 'dark');
+    } else {
+        themeIcon.textContent = 'dark_mode';
+        localStorage.setItem('theme', 'light');
+    }
+}
+
+/** Charge le thème depuis le localStorage */
+function loadTheme() {
+    const savedTheme = localStorage.getItem('theme') || 'light';
+    if (savedTheme === 'dark') {
+        body.classList.add('dark-mode');
+        themeIcon.textContent = 'light_mode';
+    } else {
+        body.classList.remove('dark-mode');
+        themeIcon.textContent = 'dark_mode';
     }
+}
+
+themeToggle.addEventListener('click', toggleTheme);
+
+
+// -------------------------------------------------------------
+// --- Logique de Glisser-Déposer et Sélection de Fichiers ---
+// -------------------------------------------------------------
+
+selectFilesButton.addEventListener('click', () => {
+    fileInput.click();
+});
+
+fileInput.addEventListener('change', (e) => {
+    handleFiles(e.target.files);
+});
+
+// Prévention du comportement par défaut
+['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+    dropZone.addEventListener(eventName, preventDefaults, false);
+    document.body.addEventListener(eventName, preventDefaults, false);
+});
+
+function preventDefaults (e) {
+    e.preventDefault();
+    e.stopPropagation();
+}
+
+// Gestion de l'état 'dragover'
+dropZone.addEventListener('dragenter', highlight, false);
+dropZone.addEventListener('dragover', highlight, false);
+dropZone.addEventListener('dragleave', unhighlight, false);
+dropZone.addEventListener('drop', unhighlight, false);
+
+function highlight() {
+    dropZone.classList.add('dragover');
+}
+
+function unhighlight() {
+    dropZone.classList.remove('dragover');
+}
+
+dropZone.addEventListener('drop', handleDrop, false);
+
+function handleDrop(e) {
+    let dt = e.dataTransfer;
+    let files = dt.files;
+    handleFiles(files);
+}
+
+/** Traite la liste des fichiers sélectionnés ou déposés */
+function handleFiles(files) {
+    selectedFiles = Array.from(files);
+    
+    // Vérification de index.html
+    currentIndexFilePresent = selectedFiles.some(file => file.name.toLowerCase() === 'index.html');
     
-    clearButton.disabled = fileCount === 0;
-    uploadStatus.textContent = fileCount > 0 
-        ? `Fichiers téléversés temporairement (${fileCount} fichiers. Index.html: ${indexFilePresent ? 'Oui' : 'Non'}).`
-        : "Aucun fichier téléversé.";
+    // Affichage des fichiers en attente
+    const filenames = selectedFiles.map(file => file.name);
+    renderFileList(filenames);
+    
+    // Mise à jour de l'état (prêt à téléverser)
+    currentTempUrl = '';
+    currentPermanentUrl = '';
+    initialFileCount = selectedFiles.length; // Pour l'état actuel
+    updateUIState();
+
+    // Lancer le téléversement temporaire immédiatement
+    if (selectedFiles.length > 0) {
+        uploadFilesToTempEndpoint(selectedFiles);
+    }
 }
 
+
+// -------------------------------------------------------------
+// --- Logique du Téléversement TEMPORAIRE vers /upload-static ---
+// -------------------------------------------------------------
+
+async function uploadFilesToTempEndpoint(filesToUpload) {
+    if (filesToUpload.length === 0) return;
+
+    // 1. Préparer l'animation et l'état
+    uploadStatus.className = 'mt-3 text-warning fw-bold text-center';
+    uploadStatus.innerHTML = '<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span> Téléversement des fichiers temporaires...';
+    
+    launchButton.disabled = true;
+    deployButton.disabled = true;
+
+    const formData = new FormData();
+    filesToUpload.forEach(file => {
+        formData.append('files[]', file); // 'files[]' doit correspondre à la manière dont Flask reçoit les fichiers multiples
+    });
+
+    try {
+        const response = await fetch('/upload-static', {
+            method: 'POST',
+            body: formData
+        });
+
+        const data = await response.json();
+
+        if (data.status === 'success') {
+            // SUCCÈS du téléversement temporaire
+            currentTempUrl = data.launch_url;
+            currentIndexFilePresent = data.index_present;
+            initialFileCount = data.file_count;
+            
+            // L'état initial du déploiement est maintenant basé sur les données du backend
+            initialFiles.length = 0; // Vider la liste affichée pour les fichiers fraichement uploadés
+            filesToUpload.forEach(file => initialFiles.push(file.name));
+            renderFileList(initialFiles);
+
+            updateUIState(); // Passer à l'état "Temporaire"
+            uploadStatus.className = 'mt-3 text-success fw-bold text-center';
+            uploadStatus.textContent = data.message;
+
+        } else {
+            // ERREUR
+            currentTempUrl = '';
+            currentIndexFilePresent = false;
+            
+            updateUIState(); // Revenir à l'état "Aucun fichier" ou "Index manquant"
+            uploadStatus.className = 'mt-3 text-danger fw-bold text-center';
+            uploadStatus.textContent = `Échec du téléversement: ${data.message}`;
+        }
+    } catch (error) {
+        console.error('Erreur réseau/inattendue lors du téléversement temporaire:', error);
+        currentTempUrl = '';
+        currentIndexFilePresent = false;
+        
+        updateUIState();
+        uploadStatus.className = 'mt-3 text-danger fw-bold text-center';
+        uploadStatus.textContent = `Erreur réseau ou inattendue lors du téléversement temporaire: ${error.message}`;
+    }
+}
+
+
 // -------------------------------------------------------------
 // --- Logique du Bouton de Déploiement Permanent (Commit) ---
 // -------------------------------------------------------------
@@ -267,8 +533,8 @@ deployButton.addEventListener('click', async () => {
     // 1. Préparer l'animation et désactiver le bouton
     deployButton.disabled = true;
     deployButton.innerHTML = '<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span> Déploiement en cours...';
-    uploadStatus.className = 'mt-3 text-info fw-bold';
-    uploadStatus.textContent = 'Téléversement des fichiers sur Hugging Face en cours... (Cela peut prendre quelques instants)';
+    uploadStatus.className = 'mt-3 text-info fw-bold text-center';
+    uploadStatus.textContent = 'Persistance des fichiers sur Hugging Face et Baserow en cours... (Cela peut prendre quelques instants)';
     
     // 2. Appel AJAX à la route de commit
     try {
@@ -281,50 +547,34 @@ deployButton.addEventListener('click', async () => {
         // 3. Traiter la réponse
         if (data.success) {
             // SUCCÈS
-            uploadStatus.className = 'mt-3 text-success fw-bold';
-            uploadStatus.textContent = data.message; 
-            
-            // Mise à jour des URLs
-            permanentUrlInput.value = data.url;
-            permanentUrlContainer.style.display = 'block';
-            tempUrlContainer.style.display = 'none';
+            currentPermanentUrl = data.url; // Mise à jour de l'URL permanente
+            currentTempUrl = '';
             
-            // Mise à jour du bouton (Succès, non réactivable)
-            deployButton.innerHTML = '<span class="material-symbols-rounded align-middle me-1">cloud_done</span> Déployé !';
-            deployButton.classList.remove('btn-success');
-            deployButton.classList.add('btn-secondary'); 
-            deployButton.disabled = true; 
+            updateUIState(); // Passer à l'état "Permanent"
+            uploadStatus.className = 'mt-3 text-success fw-bold text-center';
+            uploadStatus.textContent = data.message; 
             
-            launchButton.disabled = false; // Lancer le site déployé
-
         } else {
             // ERREUR
-            uploadStatus.className = 'mt-3 text-danger fw-bold';
-            uploadStatus.textContent = `Échec du déploiement: ${data.message}`;
-
             // Rétablir les boutons à l'état "temporaire" (si l'échec n'est pas critique)
-            deployButton.innerHTML = '<span class="material-symbols-rounded align-middle me-1">cloud_upload</span> Déployer le Site Web (Permanent)';
-            deployButton.disabled = !indexFilePresent; // Réactiver si un index.html est présent
+            uploadStatus.className = 'mt-3 text-danger fw-bold text-center';
+            uploadStatus.textContent = `Échec du déploiement: ${data.message}`;
             
-            // L'URL temporaire doit rester affichée
-            if (currentTempUrl && indexFilePresent) {
-                tempUrlContainer.style.display = 'block';
-            }
+            updateUIState(); // Rétablit les boutons en se basant sur currentTempUrl
+
         }
     } catch (error) {
         console.error('Erreur réseau/inattendue:', error);
-        uploadStatus.className = 'mt-3 text-danger fw-bold';
+        uploadStatus.className = 'mt-3 text-danger fw-bold text-center';
         uploadStatus.textContent = `Erreur réseau ou inattendue lors du déploiement: ${error.message}`;
         
-        // Rétablir les boutons
-        deployButton.innerHTML = '<span class="material-symbols-rounded align-middle me-1">cloud_upload</span> Déployer le Site Web (Permanent)';
-        deployButton.disabled = !indexFilePresent;
+        updateUIState(); // Rétablit les boutons
     }
 });
 
 
 // -------------------------------------------------------------
-// --- Logique de Copie d'URL et Initialisation ---
+// --- Logique de Copie d'URL et Lancement ---
 // -------------------------------------------------------------
 
 function setupCopyButton(button, input) {
@@ -335,12 +585,12 @@ function setupCopyButton(button, input) {
             navigator.clipboard.writeText(input.value)
                 .then(() => {
                     button.innerHTML = '<span class="material-symbols-rounded">done</span>';
-                    button.classList.remove('btn-outline-secondary');
-                    button.classList.add('btn-success');
+                    button.classList.remove('bg-gray-200');
+                    button.classList.add('bg-green-500', 'text-white');
                     setTimeout(() => {
                         button.innerHTML = '<span class="material-symbols-rounded">content_copy</span>';
-                        button.classList.remove('btn-success');
-                        button.classList.add('btn-outline-secondary');
+                        button.classList.remove('bg-green-500', 'text-white');
+                        button.classList.add('bg-gray-200');
                     }, 2000);
                 })
                 .catch(err => {
@@ -364,21 +614,27 @@ launchButton.addEventListener('click', () => {
 
 // Gère le bouton Vider (doit être implémenté au backend pour la suppression du dossier)
 clearButton.addEventListener('click', () => {
-    // NOTE: La route /clear_deployment n'est pas implémentée, ceci est un rappel pour le développeur.
-    alert("Fonction Vider: Une route de suppression doit être implémentée au backend pour supprimer le dossier temporaire et vider la session.");
+    // Si l'utilisateur clique sur Vider, on reset l'état local.
+    // NOTE: La suppression du dossier temporaire sur le serveur (route /clear_deployment) doit être implémentée au backend.
+    
+    // Réinitialisation de l'état de l'interface
+    selectedFiles = [];
+    currentTempUrl = '';
+    currentPermanentUrl = '';
+    initialFileCount = 0;
+    currentIndexFilePresent = false;
+    initialFiles.length = 0;
+    
+    renderFileList(initialFiles);
+    updateUIState();
+    
+    // Optionnel : Ajouter un appel AJAX à une route de nettoyage backend ici
+    // fetch('/clear_deployment', { method: 'POST' });
+    
+    alert("L'état local a été vidé. Pour supprimer le dossier temporaire du serveur, la route '/clear_deployment' doit être implémentée dans Flask.");
 });
 
 
-// -------------------------------------------------------------
-// --- Logique de Glisser-Déposer (Inchagée, doit être là pour fonctionner) ---
-// -------------------------------------------------------------
-
-// NOTE: Les handlers pour Drag/Drop et la sélection de fichiers
-// et le téléversement initial (appelant /upload_static_files)
-// doivent être implémentés ici ou ailleurs dans votre structure.
-// Comme vous n'avez pas fourni ces fonctions, elles sont omises,
-// mais updateInitialState se base sur les variables Flask injectées.
-
 // Initialise l'état au chargement de la page
 window.onload = updateInitialState;