map-generator/app/Views/projects/new.php

<?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 src="/assets/js/pages/new-project.js"></script>

<?php
include __DIR__ . '/../partials/footer.php';
?>