Projet réseau social un utilisateur voit le profil d'un ami

Bonjour à tous.
Je dois créer un projet de réseau social équivalent à facebook et je suis en train de créer le profil d'un membre utilisant boostrap 5.
Dans le navigateur j'ai bien le profil principal de l'administrateur affiché.
Dans mes consignes on me demande à ce que l'administrateur puisse voir le profil d'un de ses amis. J'ai codifié ceci mais le profil de l'ami n'est pas affiché dans le navigateur. Pouvez vous m'aider SVP? Merci a vous tous

<!--identité du profil administrateur-->
<div class="container mt-5">
  <div class="row">
    <div class="col-md-4">
      <div class="card">
        <img src="assets/Juan.png" alt="Photo de Juan" class="rounded-circle img-fluid" style="width: 150px" />
        <div class="card-body">
          <h5 class="card-title" id="username">Pseudonyme</h5>
          <p class="card-text" id="fullname">Nom et Prénom</p>
          <p class="card-text" id="age">Age</p>
          <p class="card-text" id="gender">Genre</p>
          <p class="card-text" id="email">Email</p>
          <p class="card-text" id="contact">Coordonnées</p>
          <p class="card-text" id="bio">Présentation</p>
          <p class="card-text" id="preferences">Préférences</p>
          <a href="#" class="btn btn-primary">Modifier</a>
        </div>
      </div>
    </div>
    <div class="col-md-8">
      <div class="card">
        <div class="card-header">Identité des utilisateurs</div>
        <div class="card-body">
          <table class="table">
            <thead>
              <tr>
                <th>Nom</th>
                <th>Prénom</th>
                <th>Profil</th>
              </tr>
            </thead>
            <tbody id="usersTableBody">
              <!-- User data here -->
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="viewProfileModal" tabindex="-1" aria-labelledby="viewProfileModalLabel">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="viewProfileModalLabel">Profil de l'ami</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body text-center">
        <img src="assets/Rafa.png" alt="Photo de Rafa" class="rounded-circle img-fluid" style="width: 150px" />
        <p><strong>Pseudonyme :</strong> <span id="friendUsername"></span></p>
        <p><strong>Nom :</strong> <span id="friendFullName"></span></p>
        <p><strong>Age :</strong> <span id="friendAge"></span></p>
        <p><strong>Genre :</strong> <span id="friendGender"></span></p>
        <p><strong>Email :</strong> <span id="friendEmail"></span></p>
        <p><strong>Coordonnées :</strong> <span id="friendContact"></span></p>
        <p><strong>Présentation :</strong> <span id="friendBio"></span></p>
        <p><strong>Préférences :</strong> <span id="friendPreferences"></span></p>
      </div>
    </div>
  </div>
</div>

Modifié par Raphael (12 Nov 2024 - 10:42)

Bonjour

Suite à votre réponse j'ai fait les modifs en modifiant la mise en forme pour le message. Merci pour votre aide

Merci beaucoup Raphael