eric/e-tandem_UI
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fixed:

Browse source 
- menus
- invitation banners
- invitation structure
This commit is contained in:
ericb 2024-12-17 16:14:35 +01:00
parent 35f19d8d0a
commit 4fe5a4d04d
6 changed files with 200 additions and 109 deletions
Download patch file Download diff file Expand all files Collapse all files

13
index.html
View file

@ -18,12 +18,13 @@
<div class="container"> <div class="container">
<h1>Forum du bilinguisme HTML/CSS maquettes</h1> <h1>Forum du bilinguisme HTML/CSS maquettes</h1>
<ul> <ul>
<li><a href="home.html" target="_blank" rel="noopener">Page d'accueil</a><span class="badge bg-warning rounded-pill ms-2">last update: 10.12.24</span></li> <li><a href="home.html" target="_blank" rel="noopener">Page d'accueil</a><span class="badge bg-warning rounded-pill ms-2">last update: 10.12.24</span><span class="badge bg-secondary rounded-pill ms-2">Go Dev</span></li>
<li><a href="connect.html" target="_blank" rel="noopener">Page de connexion</a><span class="badge bg-warning rounded-pill ms-2">last update: 10.12.24</span></li> <li><a href="connect.html" target="_blank" rel="noopener">Page de connexion</a><span class="badge bg-warning rounded-pill ms-2">last update: 10.12.24</span><span class="badge bg-secondary rounded-pill ms-2">Go Dev</span></li>
<li><a href="create-account.html" target="_blank" rel="noopener">Création de compte</a><span class="badge bg-warning rounded-pill ms-2">last update: 10.12.24</span></li> <li><a href="create-account.html" target="_blank" rel="noopener">Création de compte</a><span class="badge bg-warning rounded-pill ms-2">last update: 10.12.24</span><span class="badge bg-secondary rounded-pill ms-2">Go Dev</span></li>
<li><a href="profile.html" target="_blank" rel="noopener">Profil utilisateur</a><span class="badge bg-warning rounded-pill ms-2">last update: 11.12.24</span></li> <li><a href="profile.html" target="_blank" rel="noopener">Profil utilisateur</a><span class="badge bg-warning rounded-pill ms-2">last update: 16.12.24</span><span class="badge bg-secondary rounded-pill ms-2">Go Dev</span></li>
<li><a href="tandem-list.html" target="_blank" rel="noopener">Recherche TANDEM</a><span class="badge bg-warning rounded-pill ms-2">last update: 16.12.24</span></li> <li><a href="tandem-list.html" target="_blank" rel="noopener">Recherche TANDEM</a><span class="badge bg-warning rounded-pill ms-2">last update: 16.12.24</span><span class="badge bg-secondary rounded-pill ms-2">Go Dev</span></li>
<li><a href="404.html" target="_blank" rel="noopener">Error 404</a><span class="badge bg-warning rounded-pill ms-2">last update: 11.12.24</span></li> <li><a href="invitations-sent.html" target="_blank" rel="noopener">Demandes</a><span class="badge bg-success rounded-pill ms-2">new: 17.12.24</span></li>
<li><a href="404.html" target="_blank" rel="noopener">Error 404</a><span class="badge bg-warning rounded-pill ms-2">last update: 11.12.24</span><span class="badge bg-secondary rounded-pill ms-2">Go Dev</span></li>
</ul> </ul>
</div> </div>
</section> </section>

168
invitations-sent.html
View file

@ -1,7 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="fr"> <html lang="fr">
<head> <head>
<title>e-TANDEM · Invitations envoyées</title> <title>e-TANDEM · Demandes de TANDEMs</title>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="robots" content="noindex"> <meta name="robots" content="noindex">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
@ -39,14 +39,14 @@
<ul class="nav"> <ul class="nav">
<li class="nav-item"> <li class="nav-item">
<a href="tandem-list.html" role="menuitem" class="nav-link"> <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" class="size-6"> <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" /> <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> </svg>
Rechercher des TANDEMs</a> Rechercher des TANDEMs</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a href="#" role="menuitem" class="nav-link"> <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" class="size-6"> <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" /> <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> </svg>
Mes TANDEMs Mes TANDEMs
@ -55,35 +55,28 @@
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a href="profile.html" role="menuitem" class="nav-link"> <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" class="size-6"> <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" /> <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> </svg>
Mon profil</a> Mon profil</a>
</li> </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" class="size-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 3.75H6.912a2.25 2.25 0 0 0-2.15 1.588L2.35 13.177a2.25 2.25 0 0 0-.1.661V18a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18v-4.162c0-.224-.034-.447-.1-.661L19.24 5.338a2.25 2.25 0 0 0-2.15-1.588H15M2.25 13.5h3.86a2.25 2.25 0 0 1 2.012 1.244l.256.512a2.25 2.25 0 0 0 2.013 1.244h3.218a2.25 2.25 0 0 0 2.013-1.244l.256-.512a2.25 2.25 0 0 1 2.013-1.244h3.859M12 3v8.25m0 0-3-3m3 3 3-3" />
</svg>
Demandes reçues <span class="badge rounded-pill ms-2">101</span></a>
</li>
<li class="nav-item"> <li class="nav-item">
<a href="#" role="menuitem" class="nav-link active" aria-current="page"> <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"> <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 d="M9,3.75h-2.09c-.99,0-1.86.64-2.15,1.59l-2.41,7.84c-.07.21-.1.44-.1.66v4.16c0,1.24,1.01,2.25,2.25,2.25h15c1.24,0,2.25-1.01,2.25-2.25v-4.16c0-.22-.03-.45-.1-.66l-2.41-7.84c-.29-.94-1.16-1.59-2.15-1.59h-2.09M2.25,13.5h3.86c.85,0,1.63.48,2.01,1.24l.26.51c.38.76,1.16,1.24,2.01,1.24h3.22c.85,0,1.63-.48,2.01-1.24l.26-.51c.38-.76,1.16-1.24,2.01-1.24h3.86M12,13.25V5M12,5l3,3M12,5l-3,3" style="fill: none; stroke: #000; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5px;"/> <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> </svg>
Demandes envoyées</a> Demandes<span class="badge rounded-pill ms-2">101</span></a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a href="#" role="menuitem" class="nav-link"> <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" class="size-6"> <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" /> <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> </svg>
Statistiques</a> Statistiques</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a href="#" role="menuitem" class="nav-link"> <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" class="size-6"> <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" /> <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> </svg>
Espace documentaire</a> Espace documentaire</a>
@ -150,10 +143,10 @@
<div> <div>
<div class="row"> <div class="row">
<div class="col-lg-6 bottom-anchored order-2 order-lg-1 "> <div class="col-lg-6 bottom-anchored order-2 order-lg-1 ">
<img class="img-fluid" src="static/img/ban-3.png"> <img class="img-fluid" src="static/img/ban-5.png">
</div> </div>
<div class="col-lg-6 order-1 order-lg-2"> <div class="col-lg-6 order-1 order-lg-2">
<h1 class="display-5 fw-bold">Demandes envoyées</h1> <h1 class="display-5 fw-bold">Demandes de TANDEMs</h1>
</div> </div>
</div> </div>
</div> </div>
@ -174,10 +167,7 @@
<a href="profile.html" role="menuitem" class="nav-link">Mon profil</a> <a href="profile.html" role="menuitem" class="nav-link">Mon profil</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a href="#" role="menuitem" class="nav-link">Demandes reçues <span class="badge rounded-pill">101</span></a> <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 active" aria-current="page">Demandes envoyées</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a href="#" role="menuitem" class="nav-link">Statistiques</a> <a href="#" role="menuitem" class="nav-link">Statistiques</a>
@ -218,33 +208,98 @@
<h5 class="userPseudo fw-bold">Priscilla</h5> <h5 class="userPseudo fw-bold">Priscilla</h5>
<p>Demande envoyée le 12.12.2024</p> <p>Demande envoyée le 12.12.2024</p>
</div> </div>
<div class="invitationOptions col-md-auto"> <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> <button type="button" class="btn btn-cta rounded" data-bs-toggle="modal" data-bs-target="#alertModal">Annuler cette demande</button>
</div> </div>
</div> </div>
</div> --> </div> -->
<section class="panel">
<ul> <h1 class="fs-2">Demandes non traitées</h1>
<h2 class="fs-4 mt-4">Demandes envoyées</h2>
<ul id="sentInvitations" class="mt-4">
<li class="invitation"> <li class="invitation">
<div class="userAvatar"><img src="static/img/avatars/default-avatar.svg" alt="Priscilla"></div> <div class="userAvatar"><img src="static/img/avatars/55238.jpg" alt="Priscilla"></div>
<div> <div>
<h2 class="h5 userPseudo">Priscilla</h2> <h2 class="h6 userPseudo">Priscilla</h2>
<p class="date">Envoyée le 12.12.2024</p> <p class="date">Envoyée le 12.12.2024</p>
</div> </div>
<button type="button" class="btn btn-link rounded ms-auto" data-bs-toggle="modal" data-bs-target="#alertModal">Annuler</button> <div class="invitation-options ms-auto">
<button type="button" class="btn btn-link ms-auto" data-bs-toggle="modal" data-bs-target="#cancelModal">Annuler</button>
</div>
</li> </li>
<li class="invitation"> <li class="invitation">
<div class="userAvatar"><img src="static/img/avatars/default-avatar.svg" alt="Priscilla"></div> <div class="userAvatar"><img src="static/img/avatars/default-avatar.svg" alt="Eric B."></div>
<div> <div>
<h2 class="h5 userPseudo">Priscilla</h2> <h2 class="h6 userPseudo">Eric B.</h2>
<p class="date">Envoyée le 12.12.2024</p> <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">Annuler</button>
</div> </div>
<button type="button" class="btn btn-link rounded ms-auto" data-bs-toggle="modal" data-bs-target="#alertModal">Annuler</button>
</li> </li>
</ul> </ul>
<h2 class="fs-4 mt-4">Demandes reçues</h2>
<ul id="receivedInvitations" class="mt-4">
<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>
<div class="invitation-options ms-auto">
<button type="button" class="btn text-link" data-bs-toggle="modal" data-bs-target="#acceptModal">Accepter</button>
<button type="button" class="btn text-link" data-bs-toggle="modal" data-bs-target="#denyModal">Refuser</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">Accepter</button>
<button type="button" class="btn text-link" data-bs-toggle="modal" data-bs-target="#denyModal">Refuser</button>
</div>
</li>
</ul>
</section>
<section class="panel mt-4">
<h1 class="fs-2">Demandes traitées</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> </section>
</div> </div>
@ -274,8 +329,7 @@
</footer> </footer>
<!-- Modal --> <!-- Modal -->
<div class="modal fade" id="cancelModal" tabindex="-1" aria-label="Annuler la demande de TANDEM" aria-hidden="true">
<div class="modal fade" id="alertModal" tabindex="-1" aria-label="Annuler la demande de TANDEM" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered"> <div class="modal-dialog modal-dialog-centered">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
@ -283,14 +337,56 @@
</div> </div>
<div class="modal-body"> <div class="modal-body">
<form> <form>
<p>Vous allez annuler votre demande de TANDEM avec {&nbsp;userPseudo&nbsp;}, veuillez confirmer votre action. L'utilisateur sera notifié de cette annulation.</p> <p>Vous allez annuler votre demande de TANDEM avec {&nbsp;userPseudo&nbsp;}, veuillez confirmer votre action.</p>
<p>{&nbsp;userPseudo&nbsp;} sera notifié de cette annulation.</p>
<input type="hidden" id="userId" name="userId" value="678910" /> <input type="hidden" id="userId" name="userId" value="678910" />
</form> </form>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
<button type="button" class="btn btn-primary">Confirmer</button> <button type="submit" class="btn btn-primary">Confirmer</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 {&nbsp;userPseudo&nbsp;}, veuillez confirmer votre action.</p>
<p>{&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 {&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>
</div> </div>

19
profile.html
View file

@ -61,18 +61,12 @@
Mon profil</a> Mon profil</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a href="#" role="menuitem" class="nav-link"> <a href="invitations-sent.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" class="size-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 3.75H6.912a2.25 2.25 0 0 0-2.15 1.588L2.35 13.177a2.25 2.25 0 0 0-.1.661V18a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18v-4.162c0-.224-.034-.447-.1-.661L19.24 5.338a2.25 2.25 0 0 0-2.15-1.588H15M2.25 13.5h3.86a2.25 2.25 0 0 1 2.012 1.244l.256.512a2.25 2.25 0 0 0 2.013 1.244h3.218a2.25 2.25 0 0 0 2.013-1.244l.256-.512a2.25 2.25 0 0 1 2.013-1.244h3.859M12 3v8.25m0 0-3-3m3 3 3-3" />
</svg>
Demandes reçues <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"> <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 d="M9,3.75h-2.09c-.99,0-1.86.64-2.15,1.59l-2.41,7.84c-.07.21-.1.44-.1.66v4.16c0,1.24,1.01,2.25,2.25,2.25h15c1.24,0,2.25-1.01,2.25-2.25v-4.16c0-.22-.03-.45-.1-.66l-2.41-7.84c-.29-.94-1.16-1.59-2.15-1.59h-2.09M2.25,13.5h3.86c.85,0,1.63.48,2.01,1.24l.26.51c.38.76,1.16,1.24,2.01,1.24h3.22c.85,0,1.63-.48,2.01-1.24l.26-.51c.38-.76,1.16-1.24,2.01-1.24h3.86M12,13.25V5M12,5l3,3M12,5l-3,3" style="fill: none; stroke: #000; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5px;"/> <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> </svg>
Demandes envoyées</a> Demandes<span class="badge rounded-pill ms-2">101</span>
</a>
</li> </li>
<!-- if user has statistic privileges or is admin --> <!-- if user has statistic privileges or is admin -->
<li class="nav-item"> <li class="nav-item">
@ -180,10 +174,7 @@
<a href="profile.html" role="menuitem" class="nav-link">Mon profil</a> <a href="profile.html" role="menuitem" class="nav-link">Mon profil</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a href="#" role="menuitem" class="nav-link">Demandes reçues <span class="badge rounded-pill">101</span></a> <a href="invitations-sent.html" role="menuitem" class="nav-link">Demandes <span class="badge rounded-pill">101</span></a>
</li>
<li class="nav-item">
<a href="#" role="menuitem" class="nav-link">Demandes envoyées</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a href="#" role="menuitem" class="nav-link">Statistiques</a> <a href="#" role="menuitem" class="nav-link">Statistiques</a>

58
static/css/main.css
View file

@ -43,19 +43,6 @@ h1, h2, h3, h4, h5{
.custom-toggler.navbar-toggler-icon { .custom-toggler.navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(245,135,5,1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='1.5' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(245,135,5,1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='1.5' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
} }
.btn-link, .text-link{
color: var(--bs-link-color);
text-decoration: none;
}
.btn-link{
padding: .725rem 1rem;
}
.btn-link:hover, .btn-link:focus-visible, .text-link:hover, .text-link:focus-visible{
text-decoration: underline;
color: var(--bs-link-color);
background-color: transparent;
text-underline-offset: 0.375em;
}
.top-bar{ .top-bar{
height: var(--top-bar); height: var(--top-bar);
border-bottom: 1px solid var(--accent-normal); border-bottom: 1px solid var(--accent-normal);
@ -301,19 +288,18 @@ article li:not(:first-of-type){
padding-left: 0; padding-left: 0;
} }
.invitation{ .invitation{
background: white;
padding: calc(var(--div-padding) / 4);
border-radius: 0.25rem;
position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 2rem; gap: 2rem;
border-top: 1px solid var(--bs-gray-300);
padding-top: .75rem;
} }
.invitation .userPseudo{ .invitation .userPseudo{
margin-bottom: 0.125rem; margin-bottom: 0.125rem;
} }
.invitation:not(:first-of-type){ .invitation:not(:first-of-type){
margin-top: .75rem; margin-top: .75rem;
} }
.invitation .userAvatar img{ .invitation .userAvatar img{
width: 3rem; width: 3rem;
@ -326,7 +312,7 @@ article li:not(:first-of-type){
font-size: 0.8em; font-size: 0.8em;
color: var(--bs-gray-600); color: var(--bs-gray-600);
} }
.invitationOptions{ .invitation-options{
margin-left: auto; margin-left: auto;
align-self: center; align-self: center;
} }
@ -370,6 +356,19 @@ article li:not(:first-of-type){
.btn-cta, .btn-primary, .btn-secondary, .btn-outline-primary, .btn-outline-secondary{ .btn-cta, .btn-primary, .btn-secondary, .btn-outline-primary, .btn-outline-secondary{
font-size: 1em; font-size: 1em;
} }
.btn-link, .text-link{
color: var(--bs-link-color);
text-decoration: none;
}
.btn-link{
padding: .725rem 1rem;
}
.btn-link:focus-visible, .text-link:focus-visible{
text-decoration: underline;
color: var(--bs-link-color);
background-color: transparent;
text-underline-offset: 0.375em;
}
.btn:disabled, .btn.disabled{ .btn:disabled, .btn.disabled{
background: var(--bs-gray-400); background: var(--bs-gray-400);
color: var(--bs-gray-600); color: var(--bs-gray-600);
@ -446,6 +445,9 @@ sup.emphasis{
} }
/* modals */ /* modals */
.modal{
backdrop-filter: blur(5px);
}
.modal-header{ .modal-header{
border-bottom: none; border-bottom: none;
} }
@ -559,12 +561,15 @@ nav .icon-ui{
#avatarContainer{ #avatarContainer{
text-align: center; text-align: center;
} }
.profileOptions, .invitationOptions{ .profileOptions, .invitation-options{
display: grid; display: grid;
gap: 0 .5rem; gap: 0 .5rem;
width: fit-content; width: fit-content;
margin: calc(var(--div-padding) / 3) auto 0; margin: calc(var(--div-padding) / 3) auto 0;
} }
.invitation-options{
margin: 0;
}
.offcanvas .userAvatar{ .offcanvas .userAvatar{
margin: 0 auto; margin: 0 auto;
text-align: center text-align: center
@ -646,6 +651,16 @@ nav .icon-ui{
color: white; color: white;
border: 1px solid white; border: 1px solid white;
} }
.btn-hero-primary:hover{
background-color: var(--primary);
color: white;
}
.btn-link:hover, .text-link:hover{
text-decoration: underline;
color: var(--bs-link-color);
background-color: transparent;
text-underline-offset: 0.375em;
}
#tandem-meet .col:hover{ #tandem-meet .col:hover{
background-color: var(--accent-light); background-color: var(--accent-light);
border-radius: 0.5rem; border-radius: 0.5rem;
@ -654,10 +669,7 @@ nav .icon-ui{
#tandem-meet .col:hover .form-check-input{ #tandem-meet .col:hover .form-check-input{
--bs-border-color: var(--primary); --bs-border-color: var(--primary);
} }
.btn-hero-primary:hover{
background-color: var(--primary);
color: white;
}
.side-menu .nav-link:not(.active):hover{ .side-menu .nav-link:not(.active):hover{
color: black; color: black;
background: #fdc314; background: #fdc314;

BIN
static/img/ban-5.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 294 KiB

23
tandem-list.html
View file

@ -62,18 +62,12 @@
Mon profil</a> Mon profil</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a href="#" role="menuitem" class="nav-link"> <a href="invitations-sent.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" class="size-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 3.75H6.912a2.25 2.25 0 0 0-2.15 1.588L2.35 13.177a2.25 2.25 0 0 0-.1.661V18a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18v-4.162c0-.224-.034-.447-.1-.661L19.24 5.338a2.25 2.25 0 0 0-2.15-1.588H15M2.25 13.5h3.86a2.25 2.25 0 0 1 2.012 1.244l.256.512a2.25 2.25 0 0 0 2.013 1.244h3.218a2.25 2.25 0 0 0 2.013-1.244l.256-.512a2.25 2.25 0 0 1 2.013-1.244h3.859M12 3v8.25m0 0-3-3m3 3 3-3" />
</svg>
Demandes reçues <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"> <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 d="M9,3.75h-2.09c-.99,0-1.86.64-2.15,1.59l-2.41,7.84c-.07.21-.1.44-.1.66v4.16c0,1.24,1.01,2.25,2.25,2.25h15c1.24,0,2.25-1.01,2.25-2.25v-4.16c0-.22-.03-.45-.1-.66l-2.41-7.84c-.29-.94-1.16-1.59-2.15-1.59h-2.09M2.25,13.5h3.86c.85,0,1.63.48,2.01,1.24l.26.51c.38.76,1.16,1.24,2.01,1.24h3.22c.85,0,1.63-.48,2.01-1.24l.26-.51c.38-.76,1.16-1.24,2.01-1.24h3.86M12,13.25V5M12,5l3,3M12,5l-3,3" style="fill: none; stroke: #000; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5px;"/> <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> </svg>
Demandes envoyées</a> Demandes<span class="badge rounded-pill ms-2">101</span>
</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a href="#" role="menuitem" class="nav-link"> <a href="#" role="menuitem" class="nav-link">
@ -175,10 +169,7 @@
<a href="profile.html" role="menuitem" class="nav-link">Mon profil</a> <a href="profile.html" role="menuitem" class="nav-link">Mon profil</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a href="#" role="menuitem" class="nav-link">Demandes reçues <span class="badge rounded-pill">101</span></a> <a href="invitations-sent.html" role="menuitem" class="nav-link">Demandes</a>
</li>
<li class="nav-item">
<a href="invitations-sent.html" role="menuitem" class="nav-link">Demandes envoyées</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a href="#" role="menuitem" class="nav-link">Statistiques</a> <a href="#" role="menuitem" class="nav-link">Statistiques</a>
@ -3895,7 +3886,7 @@
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
<button type="button" class="btn btn-primary">Signaler</button> <button type="submit" class="btn btn-primary">Signaler</button>
</div> </div>
</div> </div>
</div> </div>
@ -3916,7 +3907,7 @@
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
<button type="button" class="btn btn-primary">Confirmer</button> <button type="submit" class="btn btn-primary">Confirmer</button>
</div> </div>
</div> </div>
</div> </div>