e-tandem_UI/invitations.html
2024-12-17 17:48:59 +01:00

416 lines
32 KiB
HTML

<!DOCTYPE html>
<html lang="fr">
<head>
<title>e-TANDEM · Demandes de TANDEMs</title>
<meta charset="UTF-8">
<meta name="robots" content="noindex">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Blabla">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link href="static/css/bootstrap.min.css" rel="stylesheet">
<link href="static/css/main.css" rel="stylesheet">
<script src="static/js/vendor/bootstrap.bundle.min.js"></script>
<script src="static/js/js.js"></script>
</head>
<body data-platform="public" data-screen="invitations">
<header class="top-bar fixed-top">
<div class="d-grid gap-3 align-items-center">
<nav class="navbar navbar-expand-lg bg-body-tertiary" aria-label="Main navigation">
<div class="container">
<a class="navbar-brand" href="home.html">
<img src="static/img/logo/logo_e-tandem-Bilinguisme_FR.svg">
</a>
<button type="button" id="menuToggle" class="navbar-toggler border-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#mainNav" aria-controls="mainNav" aria-label="Toggle main menu">
<span class="custom-toggler navbar-toggler-icon"></span>
</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="mainNav" aria-label="Main menu" data-bs-scroll="false">
<!-- <div class="offcanvas-header">
<button type="button" type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close main menu"></button>
</div> -->
<div class="offcanvas-body">
<nav class="side-menu" id="offSideMenu">
<div class="userAvatar">
<img src="static/img/avatars/default-avatar.svg" alt="Priscilla">
<p class="userPseudo">Forum du Bilinguisme</p>
</div>
<ul class="nav">
<li class="nav-item">
<a href="tandem-list.html" role="menuitem" class="nav-link">
<svg xmlns="http://www.w3.org/2000/svg" class="icon-ui" fill="none" class="icon-ui" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="m15.75 15.75-2.489-2.489m0 0a3.375 3.375 0 1 0-4.773-4.773 3.375 3.375 0 0 0 4.774 4.774ZM21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
</svg>
Rechercher des TANDEMs</a>
</li>
<li class="nav-item">
<a href="#" role="menuitem" class="nav-link">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon-ui" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 0 1-.825-.242m9.345-8.334a2.126 2.126 0 0 0-.476-.095 48.64 48.64 0 0 0-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0 0 11.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155" />
</svg>
Mes TANDEMs
</a>
</li>
<li class="nav-item">
<a href="profile.html" role="menuitem" class="nav-link">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon-ui" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 9h3.75M15 12h3.75M15 15h3.75M4.5 19.5h15a2.25 2.25 0 0 0 2.25-2.25V6.75A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25v10.5A2.25 2.25 0 0 0 4.5 19.5Zm6-10.125a1.875 1.875 0 1 1-3.75 0 1.875 1.875 0 0 1 3.75 0Zm1.294 6.336a6.721 6.721 0 0 1-3.17.789 6.721 6.721 0 0 1-3.168-.789 3.376 3.376 0 0 1 6.338 0Z" />
</svg>
Mon profil</a>
</li>
<li class="nav-item">
<a href="#" role="menuitem" class="nav-link active" aria-current="page">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon-ui" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="m7.875 14.25 1.214 1.942a2.25 2.25 0 0 0 1.908 1.058h2.006c.776 0 1.497-.4 1.908-1.058l1.214-1.942M2.41 9h4.636a2.25 2.25 0 0 1 1.872 1.002l.164.246a2.25 2.25 0 0 0 1.872 1.002h2.092a2.25 2.25 0 0 0 1.872-1.002l.164-.246A2.25 2.25 0 0 1 16.954 9h4.636M2.41 9a2.25 2.25 0 0 0-.16.832V12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 12V9.832c0-.287-.055-.57-.16-.832M2.41 9a2.25 2.25 0 0 1 .382-.632l3.285-3.832a2.25 2.25 0 0 1 1.708-.786h8.43c.657 0 1.281.287 1.709.786l3.284 3.832c.163.19.291.404.382.632M4.5 20.25h15A2.25 2.25 0 0 0 21.75 18v-2.625c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125V18a2.25 2.25 0 0 0 2.25 2.25Z" />
</svg>
Demandes<span class="badge rounded-pill ms-2">101</span></a>
</li>
<li class="nav-item">
<a href="#" role="menuitem" class="nav-link">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon-ui" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3v11.25A2.25 2.25 0 0 0 6 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0 1 18 16.5h-2.25m-7.5 0h7.5m-7.5 0-1 3m8.5-3 1 3m0 0 .5 1.5m-.5-1.5h-9.5m0 0-.5 1.5m.75-9 3-3 2.148 2.148A12.061 12.061 0 0 1 16.5 7.605" />
</svg>
Statistiques</a>
</li>
<li class="nav-item">
<a href="#" role="menuitem" class="nav-link">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon-ui" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18a8.967 8.967 0 0 0-6 2.292m0-14.25v14.25" />
</svg>
Espace documentaire</a>
</li>
</ul>
<div class="separator menu-admin">
<a class="btn-link" data-bs-toggle="collapse" href="#sideMenuAdmin" role="button" aria-expanded="false" aria-controls="sideMenuAdmin">Administration</a>
</div>
<div id="sideMenuAdmin" class="collapse">
<ul class="nav">
<li class="nav-item">
<a href="#" role="menuitem" class="nav-link">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="icon-ui">
<path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z" />
</svg>
Gérer les comptes</a>
</li>
<li class="nav-item">
<a href="#" role="menuitem" class="nav-link">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="icon-ui">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z" />
</svg>
Gérer les signalements</a>
</li>
<li class="nav-item">
<a href="#" role="menuitem" class="nav-link">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="icon-ui">
<path stroke-linecap="round" stroke-linejoin="round" d="m10.5 21 5.25-11.25L21 21m-9-3h7.5M3 5.621a48.474 48.474 0 0 1 6-.371m0 0c1.12 0 2.233.038 3.334.114M9 5.25V3m3.334 2.364C11.176 10.658 7.69 15.08 3 17.502m9.334-12.138c.896.061 1.785.147 2.666.257m-4.589 8.495a18.023 18.023 0 0 1-3.827-5.802" />
</svg>
Langues</a>
</li>
<li class="nav-item">
<a href="#" role="menuitem" class="nav-link">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="icon-ui">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25ZM6.75 12h.008v.008H6.75V12Zm0 3h.008v.008H6.75V15Zm0 3h.008v.008H6.75V18Z" />
</svg>
Dictionnaire</a>
</li>
</ul>
</div>
</nav>
<div id="sideLang" class="ms-auto">
<div class="col">
<label for="lang">Choisir la langue</label>
<select id="lang" class="lang-select form-select form-select-sm" aria-label="Select language">
<option selected>Français</option>
<option>Deutsch</option>
<option>Italiano</option>
<option>Rumantsch</option>
<option>English</option>
</select>
</div>
</div>
</div>
</div>
</div>
</nav>
</div>
</header>
<main>
<div class="hero hero-secondary container-fluid">
<div>
<div class="row">
<div class="col-lg-6 bottom-anchored order-2 order-lg-1 ">
<img class="img-fluid" src="static/img/ban-5.png">
</div>
<div class="col-lg-6 order-1 order-lg-2">
<h1 class="display-5 fw-bold">Demandes de TANDEMs</h1>
</div>
</div>
</div>
</div>
<section class="container-fluid">
<div class="row my-3">
<div id="secondNav" class="col-lg-3">
<nav class="side-menu">
<ul class="nav flex-column mb-auto">
<li class="nav-item">
<a href="tandem-list.html" role="menuitem" class="nav-link">Rechercher des TANDEMs</a>
</li>
<li class="nav-item">
<a href="#" role="menuitem" class="nav-link">Mes TANDEMs</a>
</li>
<li class="nav-item">
<a href="profile.html" role="menuitem" class="nav-link">Mon profil</a>
</li>
<li class="nav-item">
<a href="#" role="menuitem" class="nav-link active" aria-current="page">Demandes</a>
</li>
<li class="nav-item">
<a href="#" role="menuitem" class="nav-link">Statistiques</a>
</li>
<li class="nav-item">
<a href="#" role="menuitem" class="nav-link">Espace documentaire</a>
</li>
</ul>
<div class="separator menu-admin">Admin</div>
<ul class="nav flex-column mb-auto">
<li class="nav-item">
<a href="#" role="menuitem" class="nav-link">Gérer les comptes</a>
</li>
<li class="nav-item">
<a href="#" role="menuitem" class="nav-link">Gérer les signalements</a>
</li>
<li class="nav-item">
<a href="#" role="menuitem" class="nav-link">Langues</a>
</li>
<li class="nav-item">
<a href="#" role="menuitem" class="nav-link">Dictionnaire</a>
</li>
</ul>
</nav>
</div>
<section id="invitationsList" class="col-lg-8">
<div id="invitationsResults">
<!-- <div class="invitation">
<div class="row">
<div class="col-auto">
<div class="userAvatar">
<img src="static/img/avatars/default-avatar.svg" alt="Priscilla">
</div>
</div>
<div class="col-auto col-md-6">
<h5 class="userPseudo fw-bold">Priscilla</h5>
<p>Demande envoyée le 12.12.2024</p>
</div>
<div class="invitation-options col-md-auto">
<button type="button" class="btn btn-cta rounded" data-bs-toggle="modal" data-bs-target="#alertModal">Annuler cette demande</button>
</div>
</div>
</div> -->
<section class="panel">
<h1 class="fs-2">Demandes en cours</h1>
<h2 class="fs-4 mt-4">Demandes envoyées</h2>
<ul id="sentInvitations">
<li class="invitation">
<div class="userAvatar"><img src="static/img/avatars/55238.jpg" alt="Priscilla"></div>
<div>
<h2 class="h6 userPseudo">Priscilla</h2>
<p class="date">Envoyée le 12.12.2024</p>
</div>
<div class="invitation-options ms-auto">
<button type="button" class="btn btn-link ms-auto" data-bs-toggle="modal" data-bs-target="#cancelModal">Retirer</button>
</div>
</li>
<li class="invitation">
<div class="userAvatar"><img src="static/img/avatars/default-avatar.svg" alt="Eric B."></div>
<div>
<h2 class="h6 userPseudo">Eric B.</h2>
<p class="date">Envoyée le 16.12.2024</p>
</div>
<div class="invitation-options ms-auto">
<button type="button" class="btn btn-link ms-auto" data-bs-toggle="modal" data-bs-target="#cancelModal">Retirer</button>
</div>
</li>
</ul>
<h2 class="fs-4 mt-4">Demandes reçues</h2>
<ul id="receivedInvitations">
<li class="invitation">
<div class="userAvatar"><img src="static/img/avatars/t800.jpg" alt="T800"></div>
<div>
<h2 class="h6 userPseudo">T800</h2>
<p class="date">Reçue le 10.12.2024</p>
</div>
<div class="invitation-options ms-auto">
<button type="button" class="btn text-link" data-bs-toggle="modal" data-bs-target="#acceptModal">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="icon-ui">
<path stroke-linecap="round" stroke-linejoin="round" d="M6.633 10.25c.806 0 1.533-.446 2.031-1.08a9.041 9.041 0 0 1 2.861-2.4c.723-.384 1.35-.956 1.653-1.715a4.498 4.498 0 0 0 .322-1.672V2.75a.75.75 0 0 1 .75-.75 2.25 2.25 0 0 1 2.25 2.25c0 1.152-.26 2.243-.723 3.218-.266.558.107 1.282.725 1.282m0 0h3.126c1.026 0 1.945.694 2.054 1.715.045.422.068.85.068 1.285a11.95 11.95 0 0 1-2.649 7.521c-.388.482-.987.729-1.605.729H13.48c-.483 0-.964-.078-1.423-.23l-3.114-1.04a4.501 4.501 0 0 0-1.423-.23H5.904m10.598-9.75H14.25M5.904 18.5c.083.205.173.405.27.602.197.4-.078.898-.523.898h-.908c-.889 0-1.713-.518-1.972-1.368a12 12 0 0 1-.521-3.507c0-1.553.295-3.036.831-4.398C3.387 9.953 4.167 9.5 5 9.5h1.053c.472 0 .745.556.5.96a8.958 8.958 0 0 0-1.302 4.665c0 1.194.232 2.333.654 3.375Z" />
</svg>
<span>Accepter</span>
</button>
<button type="button" class="btn text-link" data-bs-toggle="modal" data-bs-target="#denyModal">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="icon-ui">
<path stroke-linecap="round" stroke-linejoin="round" d="M7.498 15.25H4.372c-1.026 0-1.945-.694-2.054-1.715a12.137 12.137 0 0 1-.068-1.285c0-2.848.992-5.464 2.649-7.521C5.287 4.247 5.886 4 6.504 4h4.016a4.5 4.5 0 0 1 1.423.23l3.114 1.04a4.5 4.5 0 0 0 1.423.23h1.294M7.498 15.25c.618 0 .991.724.725 1.282A7.471 7.471 0 0 0 7.5 19.75 2.25 2.25 0 0 0 9.75 22a.75.75 0 0 0 .75-.75v-.633c0-.573.11-1.14.322-1.672.304-.76.93-1.33 1.653-1.715a9.04 9.04 0 0 0 2.86-2.4c.498-.634 1.226-1.08 2.032-1.08h.384m-10.253 1.5H9.7m8.075-9.75c.01.05.027.1.05.148.593 1.2.925 2.55.925 3.977 0 1.487-.36 2.89-.999 4.125m.023-8.25c-.076-.365.183-.75.575-.75h.908c.889 0 1.713.518 1.972 1.368.339 1.11.521 2.287.521 3.507 0 1.553-.295 3.036-.831 4.398-.306.774-1.086 1.227-1.918 1.227h-1.053c-.472 0-.745-.556-.5-.96a8.95 8.95 0 0 0 .303-.54" />
</svg>
<span>Refuser</span>
</button>
</div>
</li>
<li class="invitation">
<div class="userAvatar"><img src="static/img/avatars/default-avatar.svg" alt="Utilisateur"></div>
<div>
<h2 class="h6 userPseudo">Utilisateur avec un nom à rallonge</h2>
<p class="date">Reçue le 12.12.2024</p>
</div>
<div class="invitation-options ms-auto">
<button type="button" class="btn text-link" data-bs-toggle="modal" data-bs-target="#acceptModal">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="icon-ui">
<path stroke-linecap="round" stroke-linejoin="round" d="M6.633 10.25c.806 0 1.533-.446 2.031-1.08a9.041 9.041 0 0 1 2.861-2.4c.723-.384 1.35-.956 1.653-1.715a4.498 4.498 0 0 0 .322-1.672V2.75a.75.75 0 0 1 .75-.75 2.25 2.25 0 0 1 2.25 2.25c0 1.152-.26 2.243-.723 3.218-.266.558.107 1.282.725 1.282m0 0h3.126c1.026 0 1.945.694 2.054 1.715.045.422.068.85.068 1.285a11.95 11.95 0 0 1-2.649 7.521c-.388.482-.987.729-1.605.729H13.48c-.483 0-.964-.078-1.423-.23l-3.114-1.04a4.501 4.501 0 0 0-1.423-.23H5.904m10.598-9.75H14.25M5.904 18.5c.083.205.173.405.27.602.197.4-.078.898-.523.898h-.908c-.889 0-1.713-.518-1.972-1.368a12 12 0 0 1-.521-3.507c0-1.553.295-3.036.831-4.398C3.387 9.953 4.167 9.5 5 9.5h1.053c.472 0 .745.556.5.96a8.958 8.958 0 0 0-1.302 4.665c0 1.194.232 2.333.654 3.375Z" />
</svg>
<span>Accepter</span>
</button>
<button type="button" class="btn text-link" data-bs-toggle="modal" data-bs-target="#denyModal">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="icon-ui">
<path stroke-linecap="round" stroke-linejoin="round" d="M7.498 15.25H4.372c-1.026 0-1.945-.694-2.054-1.715a12.137 12.137 0 0 1-.068-1.285c0-2.848.992-5.464 2.649-7.521C5.287 4.247 5.886 4 6.504 4h4.016a4.5 4.5 0 0 1 1.423.23l3.114 1.04a4.5 4.5 0 0 0 1.423.23h1.294M7.498 15.25c.618 0 .991.724.725 1.282A7.471 7.471 0 0 0 7.5 19.75 2.25 2.25 0 0 0 9.75 22a.75.75 0 0 0 .75-.75v-.633c0-.573.11-1.14.322-1.672.304-.76.93-1.33 1.653-1.715a9.04 9.04 0 0 0 2.86-2.4c.498-.634 1.226-1.08 2.032-1.08h.384m-10.253 1.5H9.7m8.075-9.75c.01.05.027.1.05.148.593 1.2.925 2.55.925 3.977 0 1.487-.36 2.89-.999 4.125m.023-8.25c-.076-.365.183-.75.575-.75h.908c.889 0 1.713.518 1.972 1.368.339 1.11.521 2.287.521 3.507 0 1.553-.295 3.036-.831 4.398-.306.774-1.086 1.227-1.918 1.227h-1.053c-.472 0-.745-.556-.5-.96a8.95 8.95 0 0 0 .303-.54" />
</svg>
<span>Refuser</span>
</button>
</div>
</li>
</ul>
</section>
<section class="panel mt-4">
<h1 class="fs-2">Historique des demandes</h1>
<ul id="archivedInvitations" class="mt-4">
<li class="invitation">
<div class="userAvatar"><img src="static/img/avatars/default-avatar.svg" alt="Eric B."></div>
<div>
<h2 class="h6 userPseudo">Eric B.</h2>
<p class="date">Acceptée le 16.12.2024</p>
</div>
</li>
<li class="invitation">
<div class="userAvatar"><img src="static/img/avatars/55238.jpg" alt="Priscilla"></div>
<div>
<h2 class="h6 userPseudo">Priscilla</h2>
<p class="date">Acceptée le 12.12.2024</p>
</div>
</li>
<li class="invitation">
<div class="userAvatar"><img src="static/img/avatars/default-avatar.svg" alt="Utilisateur"></div>
<div>
<h2 class="h6 userPseudo">Utilisateur avec un nom à rallonge</h2>
<p class="date">Annulée le 12.12.2024</p>
</div>
</li>
<li class="invitation">
<div class="userAvatar"><img src="static/img/avatars/t800.jpg" alt="T800"></div>
<div>
<h2 class="h6 userPseudo">T800</h2>
<p class="date">Acceptée le 10.12.2024</p>
</div>
</li>
</ul>
</section>
</div>
</section>
</div>
</section>
</main>
<footer>
<div class="container">
<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-5 py-5">
<div class="col mb-3">
<a href="https://www.bilinguisme.ch/" target="_blank" rel="noopener"><img class="img-fluid" src="static/img/logo/forum-bilinguisme.svg" alt="Forum du Bilinguisme"></a>
</div>
<div class="col">
<h5>Forum du bilinguisme</h5>
<p>
Place Robert-Walser 7, CP 439<br>
2501 Biel/Bienne
</p>
<a class="text-link" href="mailto:support@e-tandem.ch">support@e-tandem.ch</a>
<br>
<a class="text-link" href="tel:+41 32 323 22 80">+41 32 323 22 80</a>
</div>
</div>
</div>
</footer>
<!-- Modal -->
<div class="modal fade" id="cancelModal" tabindex="-1" aria-label="Annuler la demande de TANDEM" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Retirer la demande de TANDEM avec<br>{&nbsp;userPseudo&nbsp;}</h5>
</div>
<div class="modal-body">
<form>
<p>Vous allez annuler votre demande de TANDEM avec {&nbsp;userPseudo&nbsp;}, veuillez confirmer votre action.</p>
<p>En cliquant sur Retirer, {&nbsp;userPseudo&nbsp;} sera notifié de cette annulation.</p>
<input type="hidden" id="userId" name="userId" value="678910" />
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
<button type="submit" class="btn btn-primary">Retirer</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="denyModal" tabindex="-1" aria-label="Refuser la demande de TANDEM" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Refuser le TANDEM avec<br>{&nbsp;userPseudo&nbsp;}</h5>
</div>
<div class="modal-body">
<form>
<p>Vous allez refuser la demande de TANDEM effectuée par {&nbsp;userPseudo&nbsp;}, veuillez confirmer votre action.</p>
<p>En cliquant sur Refuser, {&nbsp;userPseudo&nbsp;} sera notifié de ce refus.</p>
<input type="hidden" id="userId" name="userId" value="678910" />
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
<button type="submit" class="btn btn-primary">Refuser</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="acceptModal" tabindex="-1" aria-label="Accepter la demande de TANDEM" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Accepter le TANDEM avec<br>{&nbsp;userPseudo&nbsp;}</h5>
</div>
<div class="modal-body">
<form>
<p>Vous allez accepter la demande de TANDEM effectuée par {&nbsp;userPseudo&nbsp;}.</p>
<p>En cliquant sur Accepter, {&nbsp;userPseudo&nbsp;} sera notifié de votre acceptation et vous pourrez commencer votre TANDEM immédiatement.</p>
<input type="hidden" id="userId" name="userId" value="678910" />
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
<button type="submit" class="btn btn-primary">Accepter</button>
</div>
</div>
</div>
</div>
</body>
</html>