|
|
@@ -0,0 +1,213 @@
|
|
|
+<?php
|
|
|
+/**
|
|
|
+ * Vue de création d'un nouveau projet
|
|
|
+ */
|
|
|
+include __DIR__ . '/../partials/header.php';
|
|
|
+?>
|
|
|
+
|
|
|
+<main class="main-content">
|
|
|
+ <div class="container-fluid">
|
|
|
+ <div class="row justify-content-center">
|
|
|
+ <div class="col-lg-8 col-xl-6">
|
|
|
+ <!-- En-tête de la page -->
|
|
|
+ <div class="d-flex align-items-center mb-4">
|
|
|
+ <div>
|
|
|
+ <h1 class="h3 mb-0">
|
|
|
+ <i class="bi bi-plus-circle me-2"></i>Nouveau projet
|
|
|
+ </h1>
|
|
|
+ <p class="text-muted mb-0">Créez une nouvelle carte personnalisée</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Formulaire de création -->
|
|
|
+ <div class="card">
|
|
|
+ <div class="card-header">
|
|
|
+ <h5 class="card-title mb-0">
|
|
|
+ <i class="bi bi-pencil-square me-2"></i>Configuration du projet
|
|
|
+ </h5>
|
|
|
+ </div>
|
|
|
+ <div class="card-body">
|
|
|
+ <form id="newProjectForm" action="/projects" method="POST">
|
|
|
+ <!-- Nom de la carte -->
|
|
|
+ <div class="mb-3">
|
|
|
+ <label for="mapName" class="form-label">
|
|
|
+ <i class="bi bi-tag me-1"></i>Nom de la carte <span class="text-danger">*</span>
|
|
|
+ </label>
|
|
|
+ <input type="text" class="form-control" id="mapName" name="name" required
|
|
|
+ placeholder="Ex: Ma belle carte" maxlength="100">
|
|
|
+ <div class="form-text">Choisissez un nom descriptif pour votre carte</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Dimensions de la carte -->
|
|
|
+ <div class="mb-3">
|
|
|
+ <label class="form-label">
|
|
|
+ <i class="bi bi-aspect-ratio me-1"></i>Dimensions de la carte <span class="text-danger">*</span>
|
|
|
+ </label>
|
|
|
+ <div class="row g-2">
|
|
|
+ <div class="col-md-6">
|
|
|
+ <input type="number" class="form-control" id="mapWidth" name="width"
|
|
|
+ placeholder="Largeur" min="50" max="500" value="50" required>
|
|
|
+ <div class="form-text">Largeur en parcelle</div>
|
|
|
+ </div>
|
|
|
+ <div class="col-md-6">
|
|
|
+ <input type="number" class="form-control" id="mapHeight" name="height"
|
|
|
+ placeholder="Hauteur" min="50" max="500" value="50" required>
|
|
|
+ <div class="form-text">Hauteur en parcelle</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Description -->
|
|
|
+ <div class="mb-3">
|
|
|
+ <label for="mapDescription" class="form-label">
|
|
|
+ <i class="bi bi-textarea me-1"></i>Description
|
|
|
+ </label>
|
|
|
+ <textarea class="form-control" id="mapDescription" name="description" rows="3"
|
|
|
+ placeholder="Décrivez votre carte (optionnel)" maxlength="500"></textarea>
|
|
|
+ <div class="form-text">Ajoutez une description pour vous souvenir du but de cette carte</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Modèles -->
|
|
|
+ <div class="mb-4">
|
|
|
+ <label for="mapTemplate" class="form-label">
|
|
|
+ <i class="bi bi-palette me-1"></i>Modèle de départ <span class="text-danger">*</span>
|
|
|
+ </label>
|
|
|
+ <select class="form-select" id="mapTemplate" name="template" required>
|
|
|
+ <option value="" disabled selected>Choisissez un modèle</option>
|
|
|
+ <option value="desert">🏜️ Paysage désertique</option>
|
|
|
+ <option value="coastal">🏖️ Paysage littoral</option>
|
|
|
+ <option value="mountain">🏔️ Paysage de montagne</option>
|
|
|
+ <option value="rural">🌾 Paysage rural</option>
|
|
|
+ <option value="urban">🏙️ Paysage urbain</option>
|
|
|
+ </select>
|
|
|
+ <div class="form-text">Le modèle définit l'apparence de base de votre carte</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Aperçu du modèle sélectionné -->
|
|
|
+ <div id="templatePreview" class="mb-4" style="display: none;">
|
|
|
+ <div class="card bg-light">
|
|
|
+ <div class="card-body text-center">
|
|
|
+ <div id="templateImage" class="mb-2">
|
|
|
+ <!-- L'image du modèle sera chargée ici via JavaScript -->
|
|
|
+ </div>
|
|
|
+ <h6 id="templateTitle"></h6>
|
|
|
+ <p id="templateDescription" class="text-muted small mb-0"></p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Boutons d'action -->
|
|
|
+ <div class="d-flex gap-2 justify-content-end">
|
|
|
+ <a href="/" class="btn btn-outline-secondary">
|
|
|
+ <i class="bi bi-x-circle me-1"></i>Annuler
|
|
|
+ </a>
|
|
|
+ <button type="submit" class="btn btn-primary">
|
|
|
+ <i class="bi bi-check-circle me-1"></i>Créer le projet
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </form>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Informations supplémentaires -->
|
|
|
+ <div class="card mt-4">
|
|
|
+ <div class="card-body">
|
|
|
+ <h6 class="card-title">
|
|
|
+ <i class="bi bi-info-circle me-1"></i>Informations
|
|
|
+ </h6>
|
|
|
+ <ul class="list-unstyled small mb-0">
|
|
|
+ <li class="mb-2">
|
|
|
+ <i class="bi bi-dot me-2"></i>
|
|
|
+ <strong>Dimensions :</strong> Les dimensions recommandées sont entre 50x50 et 500x500 parcelles
|
|
|
+ </li>
|
|
|
+ <li class="mb-2">
|
|
|
+ <i class="bi bi-dot me-2"></i>
|
|
|
+ <strong>Modèles :</strong> Vous pourrez modifier l'apparence de l'arrière plan après la création du projet
|
|
|
+ </li>
|
|
|
+ <li class="mb-0">
|
|
|
+ <i class="bi bi-dot me-2"></i>
|
|
|
+ <strong>Sauvegarde :</strong> Votre projet sera automatiquement sauvegardé lors de la création
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</main>
|
|
|
+
|
|
|
+<script>
|
|
|
+// Gestion de l'aperçu du modèle
|
|
|
+document.getElementById('mapTemplate').addEventListener('change', function() {
|
|
|
+ const selectedTemplate = this.value;
|
|
|
+ const previewDiv = document.getElementById('templatePreview');
|
|
|
+ const templateImage = document.getElementById('templateImage');
|
|
|
+ const templateTitle = document.getElementById('templateTitle');
|
|
|
+ const templateDescription = document.getElementById('templateDescription');
|
|
|
+
|
|
|
+ if (selectedTemplate) {
|
|
|
+ // Données des modèles
|
|
|
+ const templates = {
|
|
|
+ desert: {
|
|
|
+ title: 'Paysage désertique',
|
|
|
+ description: 'Terrain sablonneux avec dunes et oasis occasionnelles',
|
|
|
+ emoji: '🏜️'
|
|
|
+ },
|
|
|
+ coastal: {
|
|
|
+ title: 'Paysage littoral',
|
|
|
+ description: 'Côtes avec plages, falaises et éléments marins',
|
|
|
+ emoji: '🏖️'
|
|
|
+ },
|
|
|
+ mountain: {
|
|
|
+ title: 'Paysage de montagne',
|
|
|
+ description: 'Reliefs escarpés avec sommets enneigés et vallées',
|
|
|
+ emoji: '🏔️'
|
|
|
+ },
|
|
|
+ rural: {
|
|
|
+ title: 'Paysage rural',
|
|
|
+ description: 'Champs, forêts et éléments agricoles traditionnels',
|
|
|
+ emoji: '🌾'
|
|
|
+ },
|
|
|
+ urban: {
|
|
|
+ title: 'Paysage urbain',
|
|
|
+ description: 'Villes avec bâtiments, routes et infrastructures modernes',
|
|
|
+ emoji: '🏙️'
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ const template = templates[selectedTemplate];
|
|
|
+ templateImage.innerHTML = `<span style="font-size: 3rem;">${template.emoji}</span>`;
|
|
|
+ templateTitle.textContent = template.title;
|
|
|
+ templateDescription.textContent = template.description;
|
|
|
+ previewDiv.style.display = 'block';
|
|
|
+ } else {
|
|
|
+ previewDiv.style.display = 'none';
|
|
|
+ }
|
|
|
+});
|
|
|
+
|
|
|
+// Validation du formulaire
|
|
|
+document.getElementById('newProjectForm').addEventListener('submit', function(e) {
|
|
|
+ const name = document.getElementById('mapName').value.trim();
|
|
|
+ const width = parseInt(document.getElementById('mapWidth').value);
|
|
|
+ const height = parseInt(document.getElementById('mapHeight').value);
|
|
|
+
|
|
|
+ if (!name) {
|
|
|
+ alert('Veuillez saisir un nom pour votre carte.');
|
|
|
+ e.preventDefault();
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (width < 100 || width > 2000 || height < 100 || height > 2000) {
|
|
|
+ alert('Les dimensions doivent être comprises entre 100x100 et 2000x2000 pixels.');
|
|
|
+ e.preventDefault();
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // Ici vous pouvez ajouter la logique de création du projet
|
|
|
+ console.log('Création du projet:', { name, width, height, template: document.getElementById('mapTemplate').value });
|
|
|
+});
|
|
|
+</script>
|
|
|
+
|
|
|
+<?php
|
|
|
+include __DIR__ . '/../partials/footer.php';
|
|
|
+?>
|
Ynats