permet que la creation de chaque projet puisse etre unique dans le tableau  <!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tableau de bord des Projets</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="trello.css">
</head>

<body>

<header>
    <h1>Tableau de bord des Projets</h1>
    <button id="login-button" aria-label="Se connecter">Déconnexion</button>
</header>

<main>
    <div id="project-list" role="region" aria-labelledby="project-list-heading">
    
        <div class="project-card" aria-labelledby="project-alpha-title" tabindex="0" onclick="showTooltip('Projet Alpha')">
            <h3 id="project-alpha-title">Projet Alpha</h3>
            <p>Développement de l'application X</p>
            <span class="date">Échéance : 30/11/2023</span>
            <span class="status">Statut : En cours</span>
        </div>
        <div class="project-card" aria-labelledby="project-beta-title" tabindex="0" onclick="showTooltip('Projet Bêta')">
            <h3 id="project-beta-title">Projet Bêta</h3>
            <p>Lancement de la campagne marketing</p>
            <span class="date">Échéance : 15/12/2023</span>
            <span class="status">Statut : À venir</span>
        </div>
        <div class="project-card" aria-labelledby="project-gamma-title" tabindex="0" onclick="showTooltip('Projet Gamma')">
            <h3 id="project-gamma-title">Projet Gamma</h3>
            <p>Mise à jour du site web</p>
            <span class="date">Échéance : 01/10/2023</span>
            <span class="status">Statut : Terminé</span>
        </div>
    </div>

    <!-- Bouton pour créer un nouveau projet -->
    <button id="new-project-button" aria-label="Créer un nouveau projet">Nouveau Projet</button>
    
    <div id="project-details-tooltip" class="tooltip">
        <button class="tooltip-close" onclick="closeTooltip()">&#10006;</button>
        <h2>Détails du Projet</h2>
        <div id="project-details-content"></div>
        <button class="follow-button" id="creerPage" onclick="followProject()">Suivre le projet</button>
    </div>
    
    <div id="create-project-tooltip" class="create-project-tooltip">
        <button class="tooltip-close" onclick="closeCreateProjectTooltip()">&#10006;</button>
        <h2>Créer un Nouveau Projet</h2>
        <form id="create-project-form" onsubmit="createProject(event)">
            <label for="project-title">Titre :</label>
            <input type="text" id="project-title" required>
            <label for="project-description">Description :</label>
            <textarea id="project-description" required></textarea>
            <label for="project-deadline">Échéance :</label>
            <input type="date" id="project-deadline" required>
            <label for="project-team">Équipe / Personnes en charge :</label>
            <input type="text" id="project-team" required>
            <button type="submit">Créer</button>
        </form>
    </div>

 <div id="conteneurPages"></div>

    <!-- Modale pour suivre un projet -->
    <div id="follow-project-modal" class="modal">
        <div class="modal-content">
            <span class="close-button" onclick="closeFollowProjectModal()">&times;</span> 
            <iframe id="project-details-iframe" src="index2.html" width="100%" height="100%" style="    z-index: 1000;" frameborder="0"></iframe>
        </div>    
    </div>
</main>

<script src="script.js"></script>
</body>
</html>