map-generator/app/Views/partials/footer.php

<footer id="global-footer" class="bg-dark text-center text-lg-start" style="position: fixed; bottom: 0; left: 250px; right: 0; z-index: 1000;">
        <div class="text-center p-2" style="background-color: rgba(255, 255, 255, 0.1); color: white;">
            © 2025 Map Generator - Prêt à créer des cartes exceptionnelles
        </div>
    </footer>
    <?php AssetLoader::loadJS(['/assets/jquery.min.js', '/assets/bootstrap.min.js']); ?>
    <script>
        // Gestion des outils de la sidebar
        $(document).ready(function() {
            // Gestion des outils actifs
            $('.sidebar .nav-link').click(function(e) {
                e.preventDefault();
                $('.sidebar .nav-link').removeClass('active');
                $(this).addClass('active');
                
                // Ici vous pouvez ajouter la logique pour chaque outil
                const toolId = $(this).attr('id');
                console.log('Outil sélectionné:', toolId);
            });

            // Gestion des couleurs avec sélection visuelle
            $('.color-swatch').click(function() {
                $('.color-swatch').removeClass('selected');
                $(this).addClass('selected');
                const color = $(this).css('background-color');
                $('#customColor').val(rgbToHex(color));
                console.log('Couleur sélectionnée:', color);
            });

            $('#customColor').change(function() {
                $('.color-swatch').removeClass('selected');
                console.log('Couleur personnalisée:', $(this).val());
            });

            // Gestion des calques avec interactions
            $(document).on('click', '.layer-item .bi-eye', function() {
                $(this).toggleClass('text-muted');
                console.log('Visibilité du calque toggled');
            });

            $(document).on('click', '.layer-item .bi-trash', function() {
                if (confirm('Supprimer ce calque ?')) {
                    $(this).closest('.layer-item').remove();
                    console.log('Calque supprimé');
                }
            });

            // Gestion du zoom avec indicateur
            let zoomLevel = 100;
            $('#zoomIn').click(function() {
                zoomLevel = Math.min(zoomLevel + 25, 500);
                console.log('Zoom:', zoomLevel + '%');
                updateZoomDisplay();
            });

            $('#zoomOut').click(function() {
                zoomLevel = Math.max(zoomLevel - 25, 25);
                console.log('Zoom:', zoomLevel + '%');
                updateZoomDisplay();
            });

            function updateZoomDisplay() {
                // Ici vous pouvez ajouter la logique pour appliquer le zoom au canvas
                $('.canvas-container').css('transform', `scale(${zoomLevel/100})`);
            }

            // Gestion des actions d'annulation
            let history = [];
            let historyIndex = -1;

            $('#undoBtn').click(function() {
                if (historyIndex > 0) {
                    historyIndex--;
                    console.log('Annulé - Index:', historyIndex);
                }
            });

            $('#redoBtn').click(function() {
                if (historyIndex < history.length - 1) {
                    historyIndex++;
                    console.log('Rétabli - Index:', historyIndex);
                }
            });

            // Gestion du début du dessin
            $('#startDrawing').click(function() {
                $('.canvas-container').html(`
                    <canvas id="mapCanvas" width="800" height="600" style="border: 1px solid #ccc; cursor: crosshair;"></canvas>
                    <div class="mt-2 text-muted small">
                        Utilisez les outils de la barre latérale pour dessiner sur votre carte
                    </div>
                `);
                
                // Initialisation basique du canvas
                const canvas = document.getElementById('mapCanvas');
                const ctx = canvas.getContext('2d');
                ctx.fillStyle = 'white';
                ctx.fillRect(0, 0, canvas.width, canvas.height);
                
                console.log('Canvas initialisé');
            });

            // Gestion des boutons d'aperçu et publication
            $('#previewBtn').click(function() {
                alert('Mode aperçu activé - Les outils sont désactivés');
            });

            $('#publishBtn').click(function() {
                alert('Carte publiée avec succès !');
            });
        });

        // Fonction utilitaire pour convertir RGB en hex
        function rgbToHex(rgb) {
            const result = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
            if (!result) return rgb;
            return "#" + 
                ("0" + parseInt(result[1], 10).toString(16)).slice(-2) +
                ("0" + parseInt(result[2], 10).toString(16)).slice(-2) +
                ("0" + parseInt(result[3], 10).toString(16)).slice(-2);
        }
    </script>
</body>
</html>