| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161 |
- <!DOCTYPE html>
- <html lang="fr">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Map Generator</title>
- <?php AssetLoader::loadCSS(['/assets/bootstrap.min.css', '/assets/bootstrap-icons.min.css', '/assets/styles.css']); ?>
- </head>
- <body>
- <header id="global-header">
- <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
- <div class="container-fluid">
- <a class="navbar-brand" href="#">
- <i class="bi bi-geo-alt-fill me-2"></i>
- Map Generator
- </a>
- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
- <span class="navbar-toggler-icon"></span>
- </button>
- <div class="collapse navbar-collapse" id="navbarNav">
- <ul class="navbar-nav ms-auto">
- <li class="nav-item">
- <a class="nav-link" href="#" id="saveBtn">
- <i class="bi bi-save me-1"></i>Sauvegarder
- </a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="#" id="loadBtn">
- <i class="bi bi-folder2-open me-1"></i>Charger
- </a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="#" id="exportBtn">
- <i class="bi bi-download me-1"></i>Exporter
- </a>
- </li>
- <li class="nav-item dropdown">
- <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
- <i class="bi bi-gear me-1"></i>Paramètres
- </a>
- <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
- <li><a class="dropdown-item" href="#">Préférences</a></li>
- <li><a class="dropdown-item" href="#">Raccourcis</a></li>
- <li><hr class="dropdown-divider"></li>
- <li><a class="dropdown-item" href="#">À propos</a></li>
- </ul>
- </li>
- </ul>
- </div>
- </div>
- </nav>
- </header>
- <!-- Barre latérale des outils -->
- <div class="sidebar">
- <nav class="nav flex-column">
- <!-- Gestion des projets -->
- <div class="tool-group">
- <h6><i class="bi bi-folder me-1"></i>Projet</h6>
- <a class="nav-link" href="#" id="newMap">
- <i class="bi bi-plus-circle me-2"></i>Nouvelle carte
- </a>
- <a class="nav-link" href="#" id="openMap">
- <i class="bi bi-folder-open me-2"></i>Ouvrir carte
- </a>
- <a class="nav-link" href="#" id="saveProject">
- <i class="bi bi-save me-2"></i>Sauvegarder projet
- </a>
- </div>
- <!-- Outils de dessin -->
- <div class="tool-group">
- <h6><i class="bi bi-brush me-1"></i>Outils</h6>
- <a class="nav-link active" href="#" id="brushTool">
- <i class="bi bi-brush me-2"></i>Pinceau
- </a>
- <a class="nav-link" href="#" id="eraserTool">
- <i class="bi bi-eraser me-2"></i>Gomme
- </a>
- <a class="nav-link" href="#" id="fillTool">
- <i class="bi bi-paint-bucket me-2"></i>Remplissage
- </a>
- <a class="nav-link" href="#" id="lineTool">
- <i class="bi bi-dash me-2"></i>Ligne
- </a>
- <a class="nav-link" href="#" id="rectangleTool">
- <i class="bi bi-square me-2"></i>Rectangle
- </a>
- <a class="nav-link" href="#" id="circleTool">
- <i class="bi bi-circle me-2"></i>Cercle
- </a>
- <a class="nav-link" href="#" id="selectTool">
- <i class="bi bi-cursor me-2"></i>Sélection
- </a>
- </div>
- <!-- Palette de couleurs -->
- <div class="tool-group">
- <h6><i class="bi bi-palette me-1"></i>Couleurs</h6>
- <div class="px-3">
- <div class="color-palette d-flex flex-wrap gap-1 mb-2">
- <div class="color-swatch" style="background-color: #000000; width: 20px; height: 20px; border-radius: 3px; cursor: pointer;" title="Noir"></div>
- <div class="color-swatch" style="background-color: #ffffff; width: 20px; height: 20px; border-radius: 3px; border: 1px solid #ccc; cursor: pointer;" title="Blanc"></div>
- <div class="color-swatch" style="background-color: #ff0000; width: 20px; height: 20px; border-radius: 3px; cursor: pointer;" title="Rouge"></div>
- <div class="color-swatch" style="background-color: #00ff00; width: 20px; height: 20px; border-radius: 3px; cursor: pointer;" title="Vert"></div>
- <div class="color-swatch" style="background-color: #0000ff; width: 20px; height: 20px; border-radius: 3px; cursor: pointer;" title="Bleu"></div>
- <div class="color-swatch" style="background-color: #ffff00; width: 20px; height: 20px; border-radius: 3px; cursor: pointer;" title="Jaune"></div>
- <div class="color-swatch" style="background-color: #ff00ff; width: 20px; height: 20px; border-radius: 3px; cursor: pointer;" title="Magenta"></div>
- <div class="color-swatch" style="background-color: #00ffff; width: 20px; height: 20px; border-radius: 3px; cursor: pointer;" title="Cyan"></div>
- </div>
- <input type="color" class="form-control form-control-sm" id="customColor" value="#000000">
- </div>
- </div>
- <!-- Calques -->
- <div class="tool-group">
- <h6><i class="bi bi-layers me-1"></i>Calques</h6>
- <div class="px-3">
- <button class="btn btn-outline-light btn-sm w-100 mb-2" id="addLayer">
- <i class="bi bi-plus me-1"></i>Ajouter calque
- </button>
- <div id="layersList">
- <div class="layer-item d-flex align-items-center justify-content-between p-1">
- <span>Calque 1</span>
- <div>
- <i class="bi bi-eye me-1" style="cursor: pointer;"></i>
- <i class="bi bi-trash" style="cursor: pointer;"></i>
- </div>
- </div>
- </div>
- </div>
- </div>
- <!-- Outils avancés -->
- <div class="tool-group">
- <h6><i class="bi bi-tools me-1"></i>Avancé</h6>
- <a class="nav-link" href="#" id="header-zoomIn">
- <i class="bi bi-zoom-in me-2"></i>Zoom +
- </a>
- <a class="nav-link" href="#" id="header-zoomOut">
- <i class="bi bi-zoom-out me-2"></i>Zoom -
- </a>
- <a class="nav-link" href="#" id="header-gridToggle">
- <i class="bi bi-grid me-2"></i>Grille
- </a>
- <a class="nav-link" href="#" id="header-undoBtn">
- <i class="bi bi-arrow-counterclockwise me-2"></i>Annuler
- </a>
- <a class="nav-link" href="#" id="header-redoBtn">
- <i class="bi bi-arrow-clockwise me-2"></i>Rétablir
- </a>
- </div>
- </nav>
- </div>
- <div class="main-content">
- <!-- Contenu principal de l'application -->
- </div>
- <?php AssetLoader::loadJS(['/assets/bootstrap.bundle.min.js']); ?>
|
