|
|
@@ -1,124 +1,8 @@
|
|
|
-<footer id="global-footer" class="bg-dark text-center text-lg-start mt-auto">
|
|
|
- <div class="text-center p-2" style="color: grey; background-color: none;">
|
|
|
+<footer id="global-footer" class="text-center text-lg-start mt-auto">
|
|
|
+ <div class="text-center p-2">
|
|
|
© 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>
|
Ynats