Diminuer de moitié en hauteur la zone "prêt à scanner" et la carte de Paris. Utiliser l'espace disponible entre "carte de paris" et la carte géolocalisée pour afficher les messages pour l'utilisateur - Follow Up Deployment

index.html

@@ -25,11 +25,14 @@
             100% { transform: scale(1); }
         }
         #map {
-            height: 400px;
+            height: 200px;
             width: 100%;
             border-radius: 1rem;
             box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
         }
+        .radar-scan {
+            height: 200px !important;
+        }
         .alien-icon {
             filter: drop-shadow(0 0 8px rgba(72, 187, 120, 0.7));
         }
@@ -96,9 +99,6 @@
                         </div>
                     </div>
                 </div>
-                <div id="radar-messages" class="bg-gray-700 rounded-lg p-3 text-sm min-h-12 mb-4">
-                    <!-- Messages will appear here -->
-                </div>
                 <div class="bg-gray-700 rounded-lg p-4">
                     <div class="flex justify-between items-center mb-2">
                         <span class="text-gray-300">Progression:</span>
@@ -122,6 +122,9 @@
                         <span>Localisation en cours...</span>
                     </div>
                 </div>
+                <div id="info-messages" class="mb-4 bg-gray-700 rounded-lg p-3 text-sm text-gray-300">
+                    <p>Bienvenue dans Paris Invaders! Utilisez le radar pour détecter les aliens, puis approchez-vous pour les attaquer.</p>
+                </div>
                 <div id="map" class="mb-4"></div>
                 <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
                     <button id="scan-btn" class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg flex items-center justify-center transition">
@@ -140,6 +143,13 @@
             </div>
         </div>
 
+        <!-- Alien Alert -->
+        <div id="alien-alert" class="fixed top-4 left-1/2 transform -translate-x-1/2 bg-red-700 text-white px-6 py-3 rounded-lg shadow-xl hidden items-center z-50 w-11/12 max-w-md text-center">
+            <i class="fas fa-exclamation-triangle mr-3 text-xl"></i>
+            <span id="alert-message">Alien détecté à proximité!</span>
+            <button class="ml-4 bg-white text-red-700 px-4 py-1 rounded-full font-bold hover:bg-gray-100 transition">Compris</button>
+        </div>
+
         <!-- Game Over Modal -->
         <div id="game-over-modal" class="fixed inset-0 bg-black bg-opacity-80 flex items-center justify-center hidden z-50">
             <div class="bg-gray-800 rounded-xl p-8 max-w-md w-full text-center">
@@ -541,26 +551,20 @@
             progressBar.style.width = `${progress}%`;
         }
 
-        // Show alert message in radar section
+        // Show alert message
         function showAlert(message) {
-            const messagesDiv = document.getElementById('radar-messages');
-            const messageElement = document.createElement('div');
-            messageElement.className = 'flex items-start mb-2 last:mb-0';
-            messageElement.innerHTML = `
-                <i class="fas fa-info-circle text-blue-400 mr-2 mt-0.5"></i>
-                <span>${message}</span>
-            `;
-            messagesDiv.prepend(messageElement);
+            document.getElementById('alert-message').textContent = message;
+            alienAlert.classList.remove('hidden');
             
-            // Auto-remove after 5 seconds
-            setTimeout(() => {
-                messageElement.remove();
-            }, 5000);
+            // Also show in info messages area
+            const infoDiv = document.getElementById('info-messages');
+            infoDiv.innerHTML = `<p>${message}</p>`;
+            infoDiv.classList.add('bg-blue-900', 'text-white');
             
-            // Limit to 3 messages max
-            while (messagesDiv.children.length > 3) {
-                messagesDiv.lastChild.remove();
-            }
+            setTimeout(() => {
+                alienAlert.classList.add('hidden');
+                infoDiv.classList.remove('bg-blue-900', 'text-white');
+            }, 3000);
         }
 
         // End game