map-generator/app/Views/home.php

<?php
/**
 * Vue de la page d'accueil
 */
include __DIR__ . '/partials/header.php';
?>

<main class="main-content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <!-- Zone de travail principale -->
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            <i class="bi bi-pencil-square me-2"></i>
                            Éditeur de carte
                        </h5>
                    </div>
                    <div class="card-body">
                        <!-- Zone indiquant qu'aucun projet n'est chargé -->
                        <div class="editor-empty border d-flex align-items-center justify-content-center" style="width:100%; height:600px; background-color:#e9ecef;">
                            <div class="text-center">
                                <!-- Illustration SVG représentant une carte vide -->
                                <svg role="img" aria-label="Illustration : cadriage avec point d'attention" width="200" height="140" viewBox="0 0 200 140" xmlns="http://www.w3.org/2000/svg" class="mx-auto d-block">
                                    <defs>
                                        <linearGradient id="g" x1="0" x2="1">
                                            <stop offset="0" stop-color="#f8f9fa"/>
                                            <stop offset="1" stop-color="#e9ecef"/>
                                        </linearGradient>
                                    </defs>
                                    <rect x="8" y="12" width="184" height="116" rx="8" fill="url(#g)" stroke="#ced4da" />
                                    <!-- Grid lines -->
                                    <g stroke="#adb5bd" stroke-width="1">
                                        <line x1="20" y1="20" x2="180" y2="20"/>
                                        <line x1="20" y1="40" x2="180" y2="40"/>
                                        <line x1="20" y1="60" x2="180" y2="60"/>
                                        <line x1="20" y1="80" x2="180" y2="80"/>
                                        <line x1="20" y1="100" x2="180" y2="100"/>
                                        <line x1="20" y1="120" x2="180" y2="120"/>
                                        <line x1="20" y1="20" x2="20" y2="120"/>
                                        <line x1="60" y1="20" x2="60" y2="120"/>
                                        <line x1="100" y1="20" x2="100" y2="120"/>
                                        <line x1="140" y1="20" x2="140" y2="120"/>
                                        <line x1="180" y1="20" x2="180" y2="120"/>
                                    </g>
                                    <!-- Point d'attention -->
                                    <rect x="95" y="55" width="10" height="10" fill="#dc3545" stroke="#b02a37" rx="2"/>
                                    <text x="100" y="50" text-anchor="middle" font-size="8" fill="#dc3545" font-weight="bold">!</text>
                                </svg>

                                <!-- Texte principal -->
                                <h5 class="mt-3 mb-1">Aucun projet chargé</h5>

                                <!-- Explication -->
                                <p class="text-muted small mb-3">Créez un nouveau projet ou chargez-en un existant pour commencer à éditer une carte.</p>

                                <!-- Actions rapides -->
                                <div class="d-flex justify-content-center gap-2">
                                    <a href="/projects/new" class="btn btn-primary btn-sm">Nouveau projet</a>
                                    <a href="/projects" class="btn btn-outline-secondary btn-sm">Charger un projet</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Informations sur le projet -->
                <div class="row mt-4">
                    <div class="col-md-4">
                        <div class="card">
                            <div class="card-body">
                                <h6 class="card-title">
                                    <i class="bi bi-info-circle me-1"></i>
                                    Informations
                                </h6>
                                <p class="card-text small">
                                    <strong>Dimensions:</strong> 800x600 px<br>
                                    <strong>Calques:</strong> 1<br>
                                    <strong>Outil actif:</strong> Pinceau<br>
                                    <strong>Couleur:</strong> <span style="display: inline-block; width: 12px; height: 12px; background-color: #000000; border-radius: 2px;"></span> Noir
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card">
                            <div class="card-body">
                                <h6 class="card-title">
                                    <i class="bi bi-clock-history me-1"></i>
                                    Historique
                                </h6>
                                <ul class="list-unstyled small">
                                    <li><i class="bi bi-dot me-1"></i>Carte créée</li>
                                    <li><i class="bi bi-dot me-1"></i>Calque ajouté</li>
                                    <li><i class="bi bi-dot me-1"></i>Outil sélectionné</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card">
                            <div class="card-body">
                                <h6 class="card-title">
                                    <i class="bi bi-star me-1"></i>
                                    Astuces
                                </h6>
                                <p class="card-text small">
                                    Utilisez Ctrl+Z pour annuler.<br>
                                    Cliquez-droit pour le menu contextuel.<br>
                                    Glissez-déposez des images pour les importer.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>

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