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

fixed id naming convention

Browse source
This commit is contained in:
ericb 2024-12-10 10:09:06 +01:00
parent e44c65cbce
commit 21f50f5ccd
11 changed files with 142 additions and 142 deletions
Download patch file Download diff file Expand all files Collapse all files

4
404.html
View file

@ -19,12 +19,12 @@
<a class="navbar-brand" href="home.html"> <a class="navbar-brand" href="home.html">
<img src="static/img/logo/logo_e-tandem-Bilinguisme_FR.svg"> <img src="static/img/logo/logo_e-tandem-Bilinguisme_FR.svg">
</a> </a>
<button type="button" id="menu-toggle" class="navbar-toggler border-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#mainNav" aria-controls="mainNav" aria-label="Toggle main menu"> <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> <span class="custom-toggler navbar-toggler-icon"></span>
</button> </button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="mainNav" aria-label="Main menu" data-bs-scroll="false"> <div class="offcanvas offcanvas-end" tabindex="-1" id="mainNav" aria-label="Main menu" data-bs-scroll="false">
<div class="offcanvas-body"> <div class="offcanvas-body">
<div id="side-lang" class="ms-auto"> <div id="sideLang" class="ms-auto">
<div class="col"> <div class="col">
<label for="lang">Choisir la langue</label> <label for="lang">Choisir la langue</label>
<select id="lang" class="lang-select form-select form-select-sm" aria-label="Select language"> <select id="lang" class="lang-select form-select form-select-sm" aria-label="Select language">

12
connect.html
View file

@ -19,12 +19,12 @@
<a class="navbar-brand" href="home.html"> <a class="navbar-brand" href="home.html">
<img src="static/img/logo/logo_e-tandem-Bilinguisme_FR.svg"> <img src="static/img/logo/logo_e-tandem-Bilinguisme_FR.svg">
</a> </a>
<button type="button" id="menu-toggle" class="navbar-toggler border-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#mainNav" aria-controls="mainNav" aria-label="Toggle main menu"> <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> <span class="custom-toggler navbar-toggler-icon"></span>
</button> </button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="mainNav" aria-label="Main menu" data-bs-scroll="false"> <div class="offcanvas offcanvas-end" tabindex="-1" id="mainNav" aria-label="Main menu" data-bs-scroll="false">
<div class="offcanvas-body"> <div class="offcanvas-body">
<div id="side-lang" class="ms-auto"> <div id="sideLang" class="ms-auto">
<div class="col"> <div class="col">
<label for="lang">Choisir la langue</label> <label for="lang">Choisir la langue</label>
<select id="lang" class="lang-select form-select form-select-sm" aria-label="Select language"> <select id="lang" class="lang-select form-select form-select-sm" aria-label="Select language">
@ -49,20 +49,20 @@
<form class="form-sign mb-3"> <form class="form-sign mb-3">
<h1 class="mb-4">M'identifier</h1> <h1 class="mb-4">M'identifier</h1>
<div class="form-floating mb-4"> <div class="form-floating mb-4">
<input type="email" id="userId" class="form-control"> <input type="email" id="userId" class="form-control" placeholder="nom@domaine.ch">
<label class="form-label" for="userId">Adresse électronique</label> <label class="form-label" for="userId">Adresse électronique</label>
</div> </div>
<div class="form-floating mb-3"> <div class="form-floating mb-3">
<input type="password" id="userPass" class="form-control"> <input type="password" id="userPass" class="form-control" placeholder="••••••••••">
<label class="form-label" for="userPass">Mot de passe</label> <label class="form-label" for="userPass">Mot de passe</label>
</div> </div>
<div class="mb-4"> <div class="mb-4">
<a href="#!">J'ai oublié mon mot de passe</a> <a href="#!" class="text-link">J'ai oublié mon mot de passe</a>
</div> </div>
<button class="btn btn-cta rounded w-100 py-3" type="submit">S'identifier</button> <button class="btn btn-cta rounded w-100 py-3" type="submit">S'identifier</button>
</form> </form>
<span>Je n'ai pas de compte?</span> <span>Je n'ai pas de compte?</span>
<a href="create-account.html">Créer un compte</a> <a href="create-account.html" class="text-link">Créer un compte</a>
</div> </div>
</div> </div>

16
create-account.html
View file

@ -20,12 +20,12 @@
<a class="navbar-brand" href="home.html"> <a class="navbar-brand" href="home.html">
<img src="static/img/logo/logo_e-tandem-Bilinguisme_FR.svg"> <img src="static/img/logo/logo_e-tandem-Bilinguisme_FR.svg">
</a> </a>
<button type="button" id="menu-toggle" class="navbar-toggler border-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#mainNav" aria-controls="mainNav" aria-label="Toggle main menu"> <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> <span class="custom-toggler navbar-toggler-icon"></span>
</button> </button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="mainNav" aria-label="Main menu" data-bs-scroll="false"> <div class="offcanvas offcanvas-end" tabindex="-1" id="mainNav" aria-label="Main menu" data-bs-scroll="false">
<div class="offcanvas-body"> <div class="offcanvas-body">
<div id="side-lang" class="ms-auto"> <div id="sideLang" class="ms-auto">
<div class="col"> <div class="col">
<label for="lang">Choisir la langue</label> <label for="lang">Choisir la langue</label>
<select id="lang" class="lang-select form-select form-select-sm" aria-label="Select language"> <select id="lang" class="lang-select form-select form-select-sm" aria-label="Select language">
@ -50,16 +50,16 @@
<form class="form-sign mb-3"> <form class="form-sign mb-3">
<h1 class="mb-4">Créer un compte</h1> <h1 class="mb-4">Créer un compte</h1>
<div class="form-floating mb-3"> <div class="form-floating mb-3">
<input type="email" id="userId" class="form-control"> <input type="email" id="userId" class="form-control" placeholder="nom@domaine.ch">
<label class="form-label" for="userId">Adresse électronique</label> <label class="form-label" for="userId">Adresse électronique</label>
</div> </div>
<div class="mb-3"> <div class="mb-3">
<button id="readTerms" type="button" class="btn btn-link" data-bs-toggle="modal" data-bs-target="#cgv-modal">Lire les termes et conditions d'utilisation</button> <button id="readTerms" type="button" class="btn btn-link" data-bs-toggle="modal" data-bs-target="#cgvModal">Lire les termes et conditions d'utilisation</button>
</div> </div>
<button id="btnCreateAccount" class="btn btn-cta rounded w-100 py-3" type="submit" disabled>Créer un compte</button> <button id="btnCreateAccount" class="btn btn-cta rounded w-100 py-3" type="submit" disabled>Créer un compte</button>
</form> </form>
<span>J'ai déjà un compte?</span> <span>J'ai déjà un compte?</span>
<a href="connect.html">M'identifier</a> <a href="connect.html" class="text-link">M'identifier</a>
</div> </div>
</div> </div>
</main> </main>
@ -87,7 +87,7 @@
</footer> </footer>
<!-- Modal --> <!-- Modal -->
<div class="modal fade" id="cgv-modal" tabindex="-1" aria-label="Conditions générales" aria-hidden="true"> <div class="modal fade" id="cgvModal" tabindex="-1" aria-label="Conditions générales" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable"> <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
@ -99,8 +99,8 @@
<p>Le Forum du bilinguisme se réserve le droit de supprimer en tout temps le profil de personnes dont les intentions diffèrent de l’objectif premier de cette plateforme : mettre en contact des personnes de langues différentes dans le but de former et pratiquer un TANDEM linguistique*. Le Forum du bilinguisme rappelle aux personnes inscrites que cette e-plateforme est ouverte au public et que les données personnelles publiées sont de la responsabilité de l’utilisateur. Vous pouvez en tout temps désactiver, par conséquent réactiver votre profil.</p> <p>Le Forum du bilinguisme se réserve le droit de supprimer en tout temps le profil de personnes dont les intentions diffèrent de l’objectif premier de cette plateforme : mettre en contact des personnes de langues différentes dans le but de former et pratiquer un TANDEM linguistique*. Le Forum du bilinguisme rappelle aux personnes inscrites que cette e-plateforme est ouverte au public et que les données personnelles publiées sont de la responsabilité de l’utilisateur. Vous pouvez en tout temps désactiver, par conséquent réactiver votre profil.</p>
<p><sup class="emphasis"><strong>*</strong></sup>Le Forum du bilinguisme ne peut être tenu responsable de la véracité des données publiées, ni du bien-fondé de la démarche des personnes inscrites sur la plateforme. Vous pouvez à tout moment nous signaler un profil ne respectant pas le but de cette plateforme.</p> <p><sup class="emphasis"><strong>*</strong></sup>Le Forum du bilinguisme ne peut être tenu responsable de la véracité des données publiées, ni du bien-fondé de la démarche des personnes inscrites sur la plateforme. Vous pouvez à tout moment nous signaler un profil ne respectant pas le but de cette plateforme.</p>
<div class="form-check py-3"> <div class="form-check py-3">
<input class="form-check-input" type="checkbox" value="" id="cgv-check"> <input class="form-check-input" type="checkbox" value="" id="cgvCheck">
<label class="form-check-label" for="cgv-check"> <label class="form-check-label" for="cgvCheck">
<strong>J'accepte ces termes et conditions</strong> <strong>J'accepte ces termes et conditions</strong>
</label> </label>
</div> </div>

4
dictionnary.html
View file

@ -6212,7 +6212,7 @@
<td>Tandem</td> <td>Tandem</td>
<td class="">HomepageDescription</td> <td class="">HomepageDescription</td>
<td> <td>
Die TANDEM-Methode eröffnet Ihnen einen neuen Lernhorizont. Im Gegensatz zu traditionellen Sprachkursen liegt der Schwerpunkt auf der mündlichen Kommunikation. Die tandemMethode eröffnet Ihnen einen neuen Lernhorizont. Im Gegensatz zu traditionellen Sprachkursen liegt der Schwerpunkt auf der mündlichen Kommunikation.
</td> </td>
<td> <td>
La méthode TANDEM vous ouvre un nouvel horizon d’apprentissage. A l’inverse des cours de langues traditionnels, l’accent est mis sur la communication orale. La méthode TANDEM vous ouvre un nouvel horizon d’apprentissage. A l’inverse des cours de langues traditionnels, l’accent est mis sur la communication orale.
@ -6252,7 +6252,7 @@
<td>Tandem</td> <td>Tandem</td>
<td class="">homeText1Banner</td> <td class="">homeText1Banner</td>
<td> <td>
Die TANDEM-Methode eröffnet Ihnen einen neuen Lernhorizont. Im Gegensatz zu traditionellen Sprachkursen liegt der Schwerpunkt auf der mündlichen Kommunikation. Die tandemMethode eröffnet Ihnen einen neuen Lernhorizont. Im Gegensatz zu traditionellen Sprachkursen liegt der Schwerpunkt auf der mündlichen Kommunikation.
</td> </td>
<td> <td>
La méthode TANDEM vous ouvre un nouvel horizon d’apprentissage. A l’inverse des cours de langues traditionnels, l’accent est mis sur la communication orale. La méthode TANDEM vous ouvre un nouvel horizon d’apprentissage. A l’inverse des cours de langues traditionnels, l’accent est mis sur la communication orale.

8
home.html
View file

@ -19,7 +19,7 @@
<a class="navbar-brand" href="home.html"> <a class="navbar-brand" href="home.html">
<img src="static/img/logo/logo_e-tandem-Bilinguisme_FR.svg"> <img src="static/img/logo/logo_e-tandem-Bilinguisme_FR.svg">
</a> </a>
<button type="button" id="menu-toggle" class="navbar-toggler border-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#mainNav" aria-controls="mainNav" aria-label="Toggle main menu"> <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> <span class="custom-toggler navbar-toggler-icon"></span>
</button> </button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="mainNav" aria-label="Main menu"> <div class="offcanvas offcanvas-end" tabindex="-1" id="mainNav" aria-label="Main menu">
@ -30,7 +30,7 @@
<ul class="navbar-nav"> <ul class="navbar-nav">
</ul> </ul>
<div id="side-lang" class="ms-auto"> <div id="sideLang" class="ms-auto">
<div class="col"> <div class="col">
<label for="lang">Choisir la langue</label> <label for="lang">Choisir la langue</label>
<select id="lang" class="lang-select form-select form-select-sm" aria-label="Select language"> <select id="lang" class="lang-select form-select form-select-sm" aria-label="Select language">
@ -71,7 +71,7 @@
</div> </div>
</div> </div>
</div> </div>
<section id="tandem-explanations"> <section id="tandemExplanations">
<header class="container mb-5"> <header class="container mb-5">
<h1 class="display-4 fw-semibold mb-5 mb-lg-3">Le TANDEM linguistique</h1> <h1 class="display-4 fw-semibold mb-5 mb-lg-3">Le TANDEM linguistique</h1>
<p class="fs-4 fw-light lh-sm">Parle-moi dans ta langue et je t'enseignerai la mienne</p> <p class="fs-4 fw-light lh-sm">Parle-moi dans ta langue et je t'enseignerai la mienne</p>
@ -104,7 +104,7 @@
<a class="btn btn-cta rounded mt-2" href="https://www.bilinguisme.ch/TANDEMs-linguistiques/Activites-et-entrainement/Sites-Web-applications-et-livres" target="_blank" rel="noopener">Pour davantage d'idées</a> <a class="btn btn-cta rounded mt-2" href="https://www.bilinguisme.ch/TANDEMs-linguistiques/Activites-et-entrainement/Sites-Web-applications-et-livres" target="_blank" rel="noopener">Pour davantage d'idées</a>
</article> </article>
<article id="tandem-method"> <article id="tandemMethod">
<div class="row"> <div class="row">
<div class="col order-2 order-lg-1 bottom-anchored"> <div class="col order-2 order-lg-1 bottom-anchored">
<img class="img-fluid" src="static/img/gfx2.png"> <img class="img-fluid" src="static/img/gfx2.png">

2
index.html
View file

@ -19,7 +19,7 @@
<li><a href="connect.html" target="_blank" rel="noopener">Page de connexion</a></li> <li><a href="connect.html" target="_blank" rel="noopener">Page de connexion</a></li>
<li><a href="create-account.html" target="_blank" rel="noopener">Création de compte</a></li> <li><a href="create-account.html" target="_blank" rel="noopener">Création de compte</a></li>
<li><a href="profile.html" target="_blank" rel="noopener">Profil utilisateur</a></li> <li><a href="profile.html" target="_blank" rel="noopener">Profil utilisateur</a></li>
<li><a href="tandem-list.html" target="_blank" rel="noopener">Recherche TANDEM</a></li> <li><a href="tandemList.html" target="_blank" rel="noopener">Recherche TANDEM</a></li>
<li><a href="404.html" target="_blank" rel="noopener">Error 404</a></li> <li><a href="404.html" target="_blank" rel="noopener">Error 404</a></li>
</ul> </ul>
</body> </body>

96
profile.html
View file

@ -20,7 +20,7 @@
<a class="navbar-brand" href="home.html"> <a class="navbar-brand" href="home.html">
<img src="static/img/logo/logo_e-tandem-Bilinguisme_FR.svg"> <img src="static/img/logo/logo_e-tandem-Bilinguisme_FR.svg">
</a> </a>
<button type="button" id="menu-toggle" class="navbar-toggler border-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#mainNav" aria-controls="mainNav" aria-label="Toggle main menu"> <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> <span class="custom-toggler navbar-toggler-icon"></span>
</button> </button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="mainNav" aria-label="Main menu" data-bs-scroll="false"> <div class="offcanvas offcanvas-end" tabindex="-1" id="mainNav" aria-label="Main menu" data-bs-scroll="false">
@ -29,9 +29,9 @@
</div> --> </div> -->
<div class="offcanvas-body"> <div class="offcanvas-body">
<nav class="side-menu" id="offSideMenu"> <nav class="side-menu" id="offSideMenu">
<div class="user-avatar"> <div class="userAvatar">
<img src="static/img/avatars/default-avatar.svg" alt="Priscilla"> <img src="static/img/avatars/default-avatar.svg" alt="Priscilla">
<p class="user-pseudo">Forum du Bilinguisme</p> <p class="userPseudo">Forum du Bilinguisme</p>
</div> </div>
<ul class="nav"> <ul class="nav">
<li class="nav-item"> <li class="nav-item">
@ -123,7 +123,7 @@
</div> </div>
</nav> </nav>
<div id="side-lang" class="ms-auto"> <div id="sideLang" class="ms-auto">
<div class="col"> <div class="col">
<label for="lang">Choisir la langue</label> <label for="lang">Choisir la langue</label>
<select id="lang" class="lang-select form-select form-select-sm" aria-label="Select language"> <select id="lang" class="lang-select form-select form-select-sm" aria-label="Select language">
@ -159,7 +159,7 @@
<section class="container-fluid"> <section class="container-fluid">
<div class="row my-3"> <div class="row my-3">
<div id="secondary-nav" class="col-lg-3"> <div id="secondNav" class="col-lg-3">
<nav class="side-menu"> <nav class="side-menu">
<ul class="nav flex-column mb-auto"> <ul class="nav flex-column mb-auto">
<li class="nav-item"> <li class="nav-item">
@ -208,15 +208,15 @@
<form> <form>
<div class="row g-3 align-items-center justify-content-between mb-3"> <div class="row g-3 align-items-center justify-content-between mb-3">
<div class="col-auto"> <div class="col-auto">
<div class="user-avatar"> <div class="userAvatar">
<img src="static/img/avatars/default-avatar.svg" class="img-fluid"> <img src="static/img/avatars/default-avatar.svg" class="img-fluid">
</div> </div>
<button type="button" class="btn btn-cta">Télécharger une image</button> <button type="button" class="btn btn-cta">Télécharger une image</button>
</div> </div>
<div id="user-profile-activation" class="col-auto rounded"> <div id="userProfileActivation" class="col-auto rounded">
<div class="form-check form-switch form-check-reverse"> <div class="form-check form-switch form-check-reverse">
<input class="form-check-input" type="checkbox" role="switch" id="activate-user-profile"> <input class="form-check-input" type="checkbox" role="switch" id="activateUserProfile">
<label class="form-check-label" for="activate-user-profile">Rendre mon profil public</label> <label class="form-check-label" for="activateUserProfile">Rendre mon profil public</label>
</div> </div>
</div> </div>
</div> </div>
@ -225,7 +225,7 @@
<label class="col-form-label">Pseudo</label> <label class="col-form-label">Pseudo</label>
</div> </div>
<div class="col-auto"> <div class="col-auto">
<input class="form-control" type="text" id="user-pseudo" placeholder="Forum du Bilinguisme" disabled readonly> <input class="form-control" type="text" id="userPseudo" placeholder="Forum du Bilinguisme" disabled readonly>
</div> </div>
</div> </div>
<div class="row align-items-center mb-3"> <div class="row align-items-center mb-3">
@ -233,7 +233,7 @@
<label class="col-form-label">Email</label> <label class="col-form-label">Email</label>
</div> </div>
<div class="col-md-5"> <div class="col-md-5">
<input class="form-control" type="email" id="user-mail" placeholder="forum@zweisprachigkeit.ch" disabled readonly> <input class="form-control" type="email" id="userMail" placeholder="forum@zweisprachigkeit.ch" disabled readonly>
</div> </div>
</div> </div>
<div class="row align-items-center mb-3"> <div class="row align-items-center mb-3">
@ -241,7 +241,7 @@
<label class="col-form-label">Genre</label> <label class="col-form-label">Genre</label>
</div> </div>
<div class="col-md-5"> <div class="col-md-5">
<select class="form-select" id="user-gender"> <select class="form-select" id="userGender">
<option>Homme</option> <option>Homme</option>
<option>Femme</option> <option>Femme</option>
<option>Non-binaire</option> <option>Non-binaire</option>
@ -253,7 +253,7 @@
<label class="col-form-label">Langue</label> <label class="col-form-label">Langue</label>
</div> </div>
<div class="col-md-5"> <div class="col-md-5">
<select class="form-select" id="user-lang1"> <select class="form-select" id="userLang1">
<option>Français</option> <option>Français</option>
<option>Deutsch</option> <option>Deutsch</option>
<option>Italiano</option> <option>Italiano</option>
@ -267,7 +267,7 @@
<label class="col-form-label">Langue</label> <label class="col-form-label">Langue</label>
</div> </div>
<div class="col-md-5"> <div class="col-md-5">
<select class="form-select" id="user-lang2"> <select class="form-select" id="userLang2">
<option>Français</option> <option>Français</option>
<option>Deutsch</option> <option>Deutsch</option>
<option>Italiano</option> <option>Italiano</option>
@ -281,8 +281,8 @@
<section class="panel mb-3"> <section class="panel mb-3">
<h1 class="fs-2 mb-4">Présentation</h1> <h1 class="fs-2 mb-4">Présentation</h1>
<p>Vous avez la possibilité de publier un texte permettant à toute personne intéressée d’en savoir un peu plus à votre sujet – motivation, intérêts personnels, âge, objectif du TANDEM linguistique (professionnel ou privé), horaires, etc.</p> <p>Vous avez la possibilité de publier un texte permettant à toute personne intéressée d’en savoir un peu plus à votre sujet – motivation, intérêts personnels, âge, objectif du TANDEM linguistique (professionnel ou privé), horaires, etc.</p>
<label class="form-label" for="user-description">Présentation (500 caractères max.)</label> <label class="form-label" for="userDescription">Présentation (500 caractères max.)</label>
<textarea name="user-description" id="user-description" class="form-control" placeholder="Entrez votre présentation" rows="4" maxlength="500"></textarea> <textarea name="userDescription" id="userDescription" class="form-control" placeholder="Entrez votre présentation" rows="4" maxlength="500"></textarea>
</section> </section>
<section class="panel mb-3"> <section class="panel mb-3">
<h1 class="fs-2 mb-4">Langue(s) proposée(s)</h1> <h1 class="fs-2 mb-4">Langue(s) proposée(s)</h1>
@ -290,8 +290,8 @@
<!-- lang 1 --> <!-- lang 1 -->
<div class="row gx-md-5 align-items-center mb-3"> <div class="row gx-md-5 align-items-center mb-3">
<div class="col-6"> <div class="col-6">
<label class="col-form-label" for="user-front-lang1">Langue</label> <label class="col-form-label" for="userFrontLang1">Langue</label>
<select class="form-select" id="user-front-lang1"> <select class="form-select" id="userFrontLang1">
<option>Sélectionner une langue</option> <option>Sélectionner une langue</option>
<option>Français</option> <option>Français</option>
<option>Deutsch</option> <option>Deutsch</option>
@ -301,8 +301,8 @@
</select> </select>
</div> </div>
<div class="col-6"> <div class="col-6">
<label class="col-form-label" for="user-front-level1">Niveau</label> <label class="col-form-label" for="userFrontLevel1">Niveau</label>
<select class="form-select" id="user-front-level1"> <select class="form-select" id="userFrontLevel1">
<option>Sélectionner un niveau</option> <option>Sélectionner un niveau</option>
<option>Elémentaire (A1 - A2)</option> <option>Elémentaire (A1 - A2)</option>
<option>Moyen (B1)</option> <option>Moyen (B1)</option>
@ -314,8 +314,8 @@
<!-- lang 2 --> <!-- lang 2 -->
<div class="row gx-md-5 align-items-center mb-3"> <div class="row gx-md-5 align-items-center mb-3">
<div class="col-6"> <div class="col-6">
<label class="col-form-label visually-hidden" for="user-front-lang2">Langue 2</label> <label class="col-form-label visually-hidden" for="userFrontLang2">Langue 2</label>
<select class="form-select" id="user-front-lang2"> <select class="form-select" id="userFrontLang2">
<option>Sélectionner une langue</option> <option>Sélectionner une langue</option>
<option>Français</option> <option>Français</option>
<option>Deutsch</option> <option>Deutsch</option>
@ -325,8 +325,8 @@
</select> </select>
</div> </div>
<div class="col-6"> <div class="col-6">
<label class="col-form-label visually-hidden" for="user-front-level2">Niveau 2</label> <label class="col-form-label visually-hidden" for="userFrontLevel2">Niveau 2</label>
<select class="form-select" id="user-front-level2"> <select class="form-select" id="userFrontLevel2">
<option>Sélectionner un niveau</option> <option>Sélectionner un niveau</option>
<option>Elémentaire (A1 - A2)</option> <option>Elémentaire (A1 - A2)</option>
<option>Moyen (B1)</option> <option>Moyen (B1)</option>
@ -339,8 +339,8 @@
<!-- lang 3 --> <!-- lang 3 -->
<div class="row gx-md-5 align-items-center mb-3"> <div class="row gx-md-5 align-items-center mb-3">
<div class="col-6"> <div class="col-6">
<label class="col-form-label visually-hidden" for="user-front-lang3">Langue 3</label> <label class="col-form-label visually-hidden" for="userFrontLang3">Langue 3</label>
<select class="form-select" id="user-front-lang3"> <select class="form-select" id="userFrontLang3">
<option>Sélectionner une langue</option> <option>Sélectionner une langue</option>
<option>Français</option> <option>Français</option>
<option>Deutsch</option> <option>Deutsch</option>
@ -350,8 +350,8 @@
</select> </select>
</div> </div>
<div class="col-6"> <div class="col-6">
<label class="col-form-label visually-hidden" for="user-front-level3">Niveau 3</label> <label class="col-form-label visually-hidden" for="userFrontLevel3">Niveau 3</label>
<select class="form-select" id="user-front-level3"> <select class="form-select" id="userFrontLevel3">
<option>Sélectionner un niveau</option> <option>Sélectionner un niveau</option>
<option>Elémentaire (A1 - A2)</option> <option>Elémentaire (A1 - A2)</option>
<option>Moyen (B1)</option> <option>Moyen (B1)</option>
@ -364,8 +364,8 @@
<!-- lang 4 --> <!-- lang 4 -->
<div class="row gx-md-5 align-items-center mb-3"> <div class="row gx-md-5 align-items-center mb-3">
<div class="col-6"> <div class="col-6">
<label class="col-form-label visually-hidden" for="user-front-lang4">Langue 4</label> <label class="col-form-label visually-hidden" for="userFrontLang4">Langue 4</label>
<select class="form-select" id="user-front-lang4"> <select class="form-select" id="userFrontLang4">
<option>Sélectionner une langue</option> <option>Sélectionner une langue</option>
<option>Français</option> <option>Français</option>
<option>Deutsch</option> <option>Deutsch</option>
@ -375,8 +375,8 @@
</select> </select>
</div> </div>
<div class="col-6"> <div class="col-6">
<label class="col-form-label visually-hidden" for="user-front-level4">Niveau 4</label> <label class="col-form-label visually-hidden" for="userFrontLevel4">Niveau 4</label>
<select class="form-select" id="user-front-level4"> <select class="form-select" id="userFrontLevel4">
<option>Sélectionner un niveau</option> <option>Sélectionner un niveau</option>
<option>Elémentaire (A1 - A2)</option> <option>Elémentaire (A1 - A2)</option>
<option>Moyen (B1)</option> <option>Moyen (B1)</option>
@ -389,8 +389,8 @@
<!-- lang 5 --> <!-- lang 5 -->
<div class="row gx-md-5 align-items-center mb-3"> <div class="row gx-md-5 align-items-center mb-3">
<div class="col-6"> <div class="col-6">
<label class="col-form-label visually-hidden" for="user-front-lang5">Langue 5</label> <label class="col-form-label visually-hidden" for="userFrontLang5">Langue 5</label>
<select class="form-select" id="user-front-lang5"> <select class="form-select" id="userFrontLang5">
<option>Sélectionner une langue</option> <option>Sélectionner une langue</option>
<option>Français</option> <option>Français</option>
<option>Deutsch</option> <option>Deutsch</option>
@ -400,8 +400,8 @@
</select> </select>
</div> </div>
<div class="col-6"> <div class="col-6">
<label class="col-form-label visually-hidden" for="user-front-level5">Niveau 5</label> <label class="col-form-label visually-hidden" for="userFrontLevel5">Niveau 5</label>
<select class="form-select" id="user-front-level5"> <select class="form-select" id="userFrontLevel5">
<option>Sélectionner un niveau</option> <option>Sélectionner un niveau</option>
<option>Elémentaire (A1 - A2)</option> <option>Elémentaire (A1 - A2)</option>
<option>Moyen (B1)</option> <option>Moyen (B1)</option>
@ -416,8 +416,8 @@
<!-- lang 1 --> <!-- lang 1 -->
<div class="row gx-md-5 align-items-center mb-3"> <div class="row gx-md-5 align-items-center mb-3">
<div class="col-md-6"> <div class="col-md-6">
<label class="col-form-label visually-hidden" for="user-requested-lang1">Langue</label> <label class="col-form-label visually-hidden" for="userRequestedLang1">Langue</label>
<select class="form-select" id="user-requested-lang1"> <select class="form-select" id="userRequestedLang1">
<option>Sélectionner une langue</option> <option>Sélectionner une langue</option>
<option>Français</option> <option>Français</option>
<option>Deutsch</option> <option>Deutsch</option>
@ -430,8 +430,8 @@
<!-- lang 2 --> <!-- lang 2 -->
<div class="row gx-md-5 align-items-center mb-3"> <div class="row gx-md-5 align-items-center mb-3">
<div class="col-md-6"> <div class="col-md-6">
<label class="col-form-label visually-hidden" for="user-requested-lang2">Langue 2</label> <label class="col-form-label visually-hidden" for="userRequestedLang2">Langue 2</label>
<select class="form-select" id="user-requested-lang2"> <select class="form-select" id="userRequestedLang2">
<option>Sélectionner une langue</option> <option>Sélectionner une langue</option>
<option>Français</option> <option>Français</option>
<option>Deutsch</option> <option>Deutsch</option>
@ -444,8 +444,8 @@
<!-- lang 3 --> <!-- lang 3 -->
<div class="row gx-md-5 align-items-center mb-3"> <div class="row gx-md-5 align-items-center mb-3">
<div class="col-md-6"> <div class="col-md-6">
<label class="col-form-label visually-hidden" for="user-requested-lang3">Langue 3</label> <label class="col-form-label visually-hidden" for="userRequestedLang3">Langue 3</label>
<select class="form-select" id="user-requested-lang3"> <select class="form-select" id="userRequestedLang3">
<option>Sélectionner une langue</option> <option>Sélectionner une langue</option>
<option>Français</option> <option>Français</option>
<option>Deutsch</option> <option>Deutsch</option>
@ -458,8 +458,8 @@
<!-- lang 4 --> <!-- lang 4 -->
<div class="row gx-md-5 align-items-center mb-3"> <div class="row gx-md-5 align-items-center mb-3">
<div class="col-md-6"> <div class="col-md-6">
<label class="col-form-label visually-hidden" for="user-requested-lang4">Langue 4</label> <label class="col-form-label visually-hidden" for="userRequestedLang4">Langue 4</label>
<select class="form-select" id="user-requested-lang4"> <select class="form-select" id="userRequestedLang4">
<option>Sélectionner une langue</option> <option>Sélectionner une langue</option>
<option>Français</option> <option>Français</option>
<option>Deutsch</option> <option>Deutsch</option>
@ -472,8 +472,8 @@
<!-- lang 5 --> <!-- lang 5 -->
<div class="row gx-md-5 align-items-center"> <div class="row gx-md-5 align-items-center">
<div class="col-md-6"> <div class="col-md-6">
<label class="col-form-label visually-hidden" for="user-requested-lang5">Langue 5</label> <label class="col-form-label visually-hidden" for="userRequestedLang5">Langue 5</label>
<select class="form-select" id="user-requested-lang5"> <select class="form-select" id="userRequestedLang5">
<option>Sélectionner une langue</option> <option>Sélectionner une langue</option>
<option>Français</option> <option>Français</option>
<option>Deutsch</option> <option>Deutsch</option>
@ -519,10 +519,10 @@
<div class="col-lg-6"> <div class="col-lg-6">
<div class="row gx-md-5 align-items-center"> <div class="row gx-md-5 align-items-center">
<div class="col-auto"> <div class="col-auto">
<label class="col-form-label" for="user-tandem-meet-town">Lieu de rencontre souhaité</label> <label class="col-form-label" for="userTandemMeetTown">Lieu de rencontre souhaité</label>
</div> </div>
<div class="col-md-auto"> <div class="col-md-auto">
<select class="form-select" id="user-tandem-meet-town"> <select class="form-select" id="userTandemMeetTown">
<option>Sélectionner une commune</option> <option>Sélectionner une commune</option>
<option>Biel/Bienne</option> <option>Biel/Bienne</option>
<option>Genève</option> <option>Genève</option>

44
static/css/main.css
View file

@ -182,11 +182,11 @@ h1, h2, h3, h4, h5{
/* #profile label{ /* #profile label{
font-weight: 700; font-weight: 700;
} */ } */
#user-profile-activation{ #userProfileActivation{
padding: 1.5em; padding: 1.5em;
background-color: var(--accent-light); background-color: var(--accent-light);
} }
#activate-user-profile{ #activateUserProfile{
margin-left: 1em; margin-left: 1em;
margin-top: 0; margin-top: 0;
width: 3em; width: 3em;
@ -204,21 +204,21 @@ h1, h2, h3, h4, h5{
#tandem-meet .col label{ #tandem-meet .col label{
font-weight: initial; font-weight: initial;
} }
#tandem-explanations{ #tandemExplanations{
padding-top: 5rem; padding-top: 5rem;
padding-bottom: 5rem; padding-bottom: 5rem;
background-color: var(--background-wrapper); background-color: var(--background-wrapper);
} }
#tandem-explanations header{ #tandemExplanations header{
display: grid; display: grid;
justify-items: center; justify-items: center;
text-align: center; text-align: center;
padding: 0 3rem; padding: 0 3rem;
} }
#tandem-explanations header p{ #tandemExplanations header p{
color: rgb(100,100,100); color: rgb(100,100,100);
} }
#tandem-explanations article{ #tandemExplanations article{
display: grid; display: grid;
justify-items: center; justify-items: center;
margin-top: 2rem; margin-top: 2rem;
@ -226,7 +226,7 @@ h1, h2, h3, h4, h5{
background-color: var(--accent-light); background-color: var(--accent-light);
padding: var(--div-padding); padding: var(--div-padding);
} }
#tandem-method{ #tandemMethod{
background-image: linear-gradient(to right bottom, rgb(242,135,5), rgb(246,150,2), rgb(249,165,2), rgb(251,180,9), rgb(253,155,20)); background-image: linear-gradient(to right bottom, rgb(242,135,5), rgb(246,150,2), rgb(249,165,2), rgb(251,180,9), rgb(253,155,20));
} }
.bottom-anchored{ .bottom-anchored{
@ -264,10 +264,10 @@ article li:not(:first-of-type){
color: darkgray; color: darkgray;
letter-spacing: .25em; letter-spacing: .25em;
} }
.profile .user-avatar{ .profile .userAvatar{
text-align: center; text-align: center;
} }
.user-avatar img{ .userAvatar img{
width: 9rem; width: 9rem;
height: 9rem; height: 9rem;
object-fit: cover; object-fit: cover;
@ -275,13 +275,13 @@ article li:not(:first-of-type){
border: 2px solid white; border: 2px solid white;
border-radius: 50%; border-radius: 50%;
} }
.profile .label, #signal-modal label{ .profile .label, #signalModal label{
font-weight: 700; font-weight: 700;
} }
.user-description{ .userDescription{
margin-top: 1.5em; margin-top: 1.5em;
} }
.profile-options{ .profileOptions{
margin-top: 2em; margin-top: 2em;
justify-content: end; justify-content: end;
display: flex; display: flex;
@ -289,12 +289,12 @@ article li:not(:first-of-type){
} }
/* search filters */ /* search filters */
#search-filters{ #searchFilters{
border: 1px solid white; border: 1px solid white;
background-color: rgba(255,255,255,.5); background-color: rgba(255,255,255,.5);
margin-top: 0.5rem; margin-top: 0.5rem;
} }
#search-filters form{ #searchFilters form{
padding: calc(var(--div-padding) / 3); padding: calc(var(--div-padding) / 3);
} }
@ -342,7 +342,7 @@ label[for="lang"]{
font-size: 0.9em; font-size: 0.9em;
margin-bottom: 0.25rem; margin-bottom: 0.25rem;
} }
#search-filters label{ #searchFilters label{
font-weight: 600; font-weight: 600;
} }
/* overrides */ /* overrides */
@ -454,11 +454,11 @@ nav .icon-ui{
.partners-logo-grid{ .partners-logo-grid{
grid-template-columns: repeat(auto-fit, minmax(6em, 1fr)); grid-template-columns: repeat(auto-fit, minmax(6em, 1fr));
} }
.profile .user-avatar, .profile .user-pseudo, .offcanvas .user-avatar{ .profile .userAvatar, .profile .userPseudo, .offcanvas .userAvatar{
margin: 0 auto; margin: 0 auto;
text-align: center text-align: center
} }
.profile .user-pseudo{ .profile .userPseudo{
margin: .5em auto; margin: .5em auto;
} }
} }
@ -469,17 +469,17 @@ nav .icon-ui{
h1, h2, h3, h4{ h1, h2, h3, h4{
text-align: center; text-align: center;
} }
.profile-options{ .profileOptions{
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;
} }
.offcanvas .user-avatar{ .offcanvas .userAvatar{
margin: 0 auto; margin: 0 auto;
text-align: center text-align: center
} }
.offcanvas .user-avatar img{ .offcanvas .userAvatar img{
width: 5rem; width: 5rem;
height: 5rem; height: 5rem;
} }
@ -520,11 +520,11 @@ nav .icon-ui{
.offcanvas li:not(:first-child){ .offcanvas li:not(:first-child){
margin-top: initial; margin-top: initial;
} }
.offcanvas .user-pseudo{ .offcanvas .userPseudo{
font-weight: 700; font-weight: 700;
margin-top: .5em; margin-top: .5em;
} }
#side-lang{ #sideLang{
display: flex; display: flex;
align-items: center; align-items: center;
gap: 1rem; gap: 1rem;

2
static/js/check.js
View file

@ -1,5 +1,5 @@
document.addEventListener("DOMContentLoaded", function() { document.addEventListener("DOMContentLoaded", function() {
const checkTerms = document.querySelector('#cgv-check'); const checkTerms = document.querySelector('#cgvCheck');
const createAccountButton = document.querySelector('#btnCreateAccount'); const createAccountButton = document.querySelector('#btnCreateAccount');
const readTerms = document.querySelector('#readTerms'); const readTerms = document.querySelector('#readTerms');
console.log(checkTerms, createAccountButton); console.log(checkTerms, createAccountButton);

4
static/js/js.js
View file

@ -4,14 +4,14 @@ function initTooltips(section) {
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl)); const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));
} }
function checkTermsandConditions(){ function checkTermsandConditions(){
const checkTerms = document.querySelector('#cgv-check'); const checkTerms = document.querySelector('#cgvCheck');
const createAccountButton = document.querySelector('#btnCreateAccount'); const createAccountButton = document.querySelector('#btnCreateAccount');
createAccountButton.disabled = !checkTerms.checked; createAccountButton.disabled = !checkTerms.checked;
} }
document.addEventListener("DOMContentLoaded", function() { document.addEventListener("DOMContentLoaded", function() {
const offmenu = document.getElementById("offSideMenu"); const offmenu = document.getElementById("offSideMenu");
const sidemenu = document.getElementById("secondary-nav"); const sidemenu = document.getElementById("secondNav");
function toggleMenus(mediaQuery) { function toggleMenus(mediaQuery) {
if (!mediaQuery.matches) { if (!mediaQuery.matches) {

92
tandem-list.html
View file

@ -20,7 +20,7 @@
<a class="navbar-brand" href="home.html"> <a class="navbar-brand" href="home.html">
<img src="static/img/logo/logo_e-tandem-Bilinguisme_FR.svg"> <img src="static/img/logo/logo_e-tandem-Bilinguisme_FR.svg">
</a> </a>
<button type="button" id="menu-toggle" class="navbar-toggler border-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#mainNav" aria-controls="mainNav" aria-label="Toggle main menu"> <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> <span class="custom-toggler navbar-toggler-icon"></span>
</button> </button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="mainNav" aria-label="Main menu" data-bs-scroll="false"> <div class="offcanvas offcanvas-end" tabindex="-1" id="mainNav" aria-label="Main menu" data-bs-scroll="false">
@ -29,9 +29,9 @@
</div> --> </div> -->
<div class="offcanvas-body"> <div class="offcanvas-body">
<nav class="side-menu" id="offSideMenu"> <nav class="side-menu" id="offSideMenu">
<div class="user-avatar"> <div class="userAvatar">
<img src="static/img/avatars/default-avatar.svg" alt="Priscilla"> <img src="static/img/avatars/default-avatar.svg" alt="Priscilla">
<p class="user-pseudo">Forum du Bilinguisme</p> <p class="userPseudo">Forum du Bilinguisme</p>
</div> </div>
<ul class="nav"> <ul class="nav">
<li class="nav-item"> <li class="nav-item">
@ -123,7 +123,7 @@
</div> </div>
</nav> </nav>
<div id="side-lang" class="ms-auto"> <div id="sideLang" class="ms-auto">
<div class="col"> <div class="col">
<label for="lang">Choisir la langue</label> <label for="lang">Choisir la langue</label>
<select id="lang" class="lang-select form-select form-select-sm" aria-label="Select language"> <select id="lang" class="lang-select form-select form-select-sm" aria-label="Select language">
@ -158,7 +158,7 @@
<section class="container-fluid"> <section class="container-fluid">
<div class="row my-3"> <div class="row my-3">
<div id="secondary-nav" class="col-lg-3"> <div id="secondNav" class="col-lg-3">
<nav class="side-menu"> <nav class="side-menu">
<ul class="nav flex-column mb-auto"> <ul class="nav flex-column mb-auto">
<li class="nav-item"> <li class="nav-item">
@ -201,18 +201,18 @@
</nav> </nav>
</div> </div>
<section id="tandem-list" class="col-lg-8"> <section id="tandemList" class="col-lg-8">
<div class="ui-btn"> <div class="ui-btn">
<a class="btn-link" data-bs-toggle="collapse" href="#search-filters" role="button" aria-expanded="false" aria-controls="search-filters"><span><img class="icon-ui" src="static/img/icons/filters.svg" alt=""></span>Filtrer</a> <a class="btn-link" data-bs-toggle="collapse" href="#searchFilters" role="button" aria-expanded="false" aria-controls="searchFilters"><span><img class="icon-ui" src="static/img/icons/filters.svg" alt=""></span>Filtrer</a>
</div> </div>
<div id="search-filters" class="collapse"> <div id="searchFilters" class="collapse">
<form> <form>
<!-- Ajax form submit --> <!-- Ajax form submit -->
<div class="row"> <div class="row">
<div class="col-md-auto"> <div class="col-md-auto">
<div class="align-items-center"> <div class="align-items-center">
<label class="col-form-label">Langue(s) proposée(s):</label> <label class="col-form-label">Langue(s) proposée(s):</label>
<select class="form-select" id="user-given-langs"> <select class="form-select" id="userGivenLangs">
<option>--------</option> <option>--------</option>
<option>Français</option> <option>Français</option>
<option>Deutsch</option> <option>Deutsch</option>
@ -226,7 +226,7 @@
<div class="col-md-auto"> <div class="col-md-auto">
<div class="align-items-center"> <div class="align-items-center">
<label class="col-form-label">Langue(s) recherchée(s):</label> <label class="col-form-label">Langue(s) recherchée(s):</label>
<select class="form-select" id="user-searched-langs"> <select class="form-select" id="userSearchedLangs">
<option>--------</option> <option>--------</option>
<option>Français</option> <option>Français</option>
<option>Deutsch</option> <option>Deutsch</option>
@ -241,7 +241,7 @@
<div class="col-md-auto"> <div class="col-md-auto">
<div class="align-items-center"> <div class="align-items-center">
<label class="col-form-label">Lieu de rencontre:</label> <label class="col-form-label">Lieu de rencontre:</label>
<select class="form-select" id="user-searched-location"> <select class="form-select" id="userSearchedLocation">
<option selected value="">Indifférent</option> <option selected value="">Indifférent</option>
<!-- Note: doesn't know what's the value for each town as it doesn't match the real NPA. <!-- Note: doesn't know what's the value for each town as it doesn't match the real NPA.
eg: Delémont is 2800. Maybe it's the database index --> eg: Delémont is 2800. Maybe it's the database index -->
@ -3666,13 +3666,13 @@
<div class="col-md-3"> <div class="col-md-3">
<div class="align-items-center"> <div class="align-items-center">
<label class="col-form-label">Distance:</label> <label class="col-form-label">Distance:</label>
<input type="number" class="form-control" id="user-searched-distance" placeholder="Distance (km)" step="1"> <input type="number" class="form-control" id="userSearchedRadius" placeholder="Distance (km)" step="1">
</div> </div>
</div> </div>
<div class="col-md-auto"> <div class="col-md-auto">
<div class="align-items-center"> <div class="align-items-center">
<label class="col-form-label">Canton:</label> <label class="col-form-label">Canton:</label>
<select class="form-select" id="user-searched-location"> <select class="form-select" id="userSearchedLocation">
<option value="" selected>Tous les cantons</option> <option value="" selected>Tous les cantons</option>
<option value="AG">AG</option> <option value="AG">AG</option>
<option value="AI">AI</option> <option value="AI">AI</option>
@ -3707,7 +3707,7 @@
<div class="col-md-auto"> <div class="col-md-auto">
<div class="align-items-center"> <div class="align-items-center">
<label class="col-form-label">Genre:</label> <label class="col-form-label">Genre:</label>
<select class="form-select" id="user-searched-gender"> <select class="form-select" id="userSearchedGender">
<option>Indifférent</option> <option>Indifférent</option>
<option>Feminin</option> <option>Feminin</option>
<option>Masculin</option> <option>Masculin</option>
@ -3718,68 +3718,68 @@
</div> </div>
</form> </form>
</div> </div>
<div id="search-total-results" class="alert alert-warning mt-3"> <div id="searchTotalResults" class="alert alert-warning mt-3">
XX profils correspondent à votre recherche XX profils correspondent à votre recherche
</div> </div>
<div id="tandem-search-results"> <div id="tandemSearchResults">
<!-- profile test --> <!-- profile test -->
<div class="profile"> <div class="profile">
<div class="row"> <div class="row">
<div class="col-lg-2"> <div class="col-lg-2">
<div class="user-avatar"> <div class="userAvatar">
<img src="static/img/avatars/default-avatar.svg" alt="Priscilla"> <img src="static/img/avatars/default-avatar.svg" alt="Priscilla">
</div> </div>
</div> </div>
<div class="col-lg-9"> <div class="col-lg-9">
<h4 class="user-pseudo display-6 fw-bold">Priscilla</h4> <h4 class="userPseudo display-6 fw-bold">Priscilla</h4>
<div class="row"> <div class="row">
<div class="col-lg-6"> <div class="col-lg-6">
<div class="user-gender"> <div class="userGender">
<span class="label">Genre:</span> <span class="label">Genre:</span>
<span>Féminin</span> <span>Féminin</span>
</div> </div>
<div class="user-meet"> <div class="userMeet">
<span class="label">Mode de rencontre:</span> <span class="label">Mode de rencontre:</span>
<span>sur place et virtuel</span> <span>sur place et virtuel</span>
</div> </div>
<div class="user-meet-location"> <div class="userMeetLocation">
<span class="label">Lieu de rencontre:</span> <span class="label">Lieu de rencontre:</span>
<span>Bern</span> <span>Bern</span>
</div> </div>
<div class="user-last-connexion"> <div class="userLastConnexion">
<span class="label">Dernière connexion:</span> <span class="label">Dernière connexion:</span>
<span>21 novembre 2024</span> <span>21 novembre 2024</span>
</div> </div>
</div> </div>
<div class="col-lg-6 align-self-end"> <div class="col-lg-6 align-self-end">
<div class="user-given-languages"> <div class="userGivenLanguages">
<span class="label">Langue(s) proposée(s):</span> <span class="label">Langue(s) proposée(s):</span>
<span>Allemand, Suisse-allemand, Anglais</span> <span>Allemand, Suisse-allemand, Anglais</span>
</div> </div>
<div class="user-searched-languages"> <div class="userSearchedLanguages">
<span class="label">Langue(s) recherchée(s):</span> <span class="label">Langue(s) recherchée(s):</span>
<span>Français</span> <span>Français</span>
</div> </div>
<div class="user-main-language1"> <div class="userMainLanguage1">
<span class="label">Langue maternelle 1:</span> <span class="label">Langue maternelle 1:</span>
<span>Allemand</span> <span>Allemand</span>
</div> </div>
<div class="user-main-language2"> <div class="userMainLanguage2">
<span class="label">Langue maternelle 2:</span> <span class="label">Langue maternelle 2:</span>
<span>Suisse-allemand</span> <span>Suisse-allemand</span>
</div> </div>
</div> </div>
</div> </div>
<p class="user-description"> <p class="userDescription">
Ich möchte gerne meine Französischkenntnisse verbessern. In meiner Freizeit male bzw. illustriere ich, lese, mache Yoga oder verbringe Zeit in der Natur. Ich komme aus Thun, arbeite aber in Bern. Gerne unterstütze ich dich dabei, deine Deutschkenntnisse zu verbessern. Ich möchte gerne meine Französischkenntnisse verbessern. In meiner Freizeit male bzw. illustriere ich, lese, mache Yoga oder verbringe Zeit in der Natur. Ich komme aus Thun, arbeite aber in Bern. Gerne unterstütze ich dich dabei, deine Deutschkenntnisse zu verbessern.
</p> </p>
</div> </div>
<div class="profile-options"> <div class="profileOptions">
<button type="button" class="btn btn-cta rounded">Proposer un TANDEM</button> <button type="button" class="btn btn-cta rounded">Proposer un TANDEM</button>
<button type="button" class="btn btn-link" data-bs-toggle="modal" data-bs-target="#signal-modal">Signaler ce profil inapproprié</button> <button type="button" class="btn btn-link" data-bs-toggle="modal" data-bs-target="#signalModal">Signaler ce profil inapproprié</button>
</div> </div>
</div> </div>
</div> </div>
@ -3788,59 +3788,59 @@
<div class="profile"> <div class="profile">
<div class="row"> <div class="row">
<div class="col-lg-2"> <div class="col-lg-2">
<div class="user-avatar"> <div class="userAvatar">
<img src="static/img/avatars/55238.jpg" alt="Petra Horvat-Puzak"> <img src="static/img/avatars/55238.jpg" alt="Petra Horvat-Puzak">
</div> </div>
</div> </div>
<div class="col-lg-9"> <div class="col-lg-9">
<h4 class="user-pseudo display-6 fw-bold">Petra Horvat-Puzak</h4> <h4 class="userPseudo display-6 fw-bold">Petra Horvat-Puzak</h4>
<div class="row"> <div class="row">
<div class="col-lg-6"> <div class="col-lg-6">
<div class="user-gender"> <div class="userGender">
<span class="label">Genre:</span> <span class="label">Genre:</span>
<span>Féminin</span> <span>Féminin</span>
</div> </div>
<div class="user-meet"> <div class="userMeet">
<span class="label">Mode de rencontre:</span> <span class="label">Mode de rencontre:</span>
<span>sur place, en face à face</span> <span>sur place, en face à face</span>
</div> </div>
<div class="user-meet-location"> <div class="userMeetLocation">
<span class="label">Lieu de rencontre:</span> <span class="label">Lieu de rencontre:</span>
<span>Bern</span> <span>Bern</span>
</div> </div>
<div class="user-last-connexion"> <div class="userLastConnexion">
<span class="label">Dernière connexion:</span> <span class="label">Dernière connexion:</span>
<span>25 novembre 2024</span> <span>25 novembre 2024</span>
</div> </div>
</div> </div>
<div class="col-lg-6 align-self-end"> <div class="col-lg-6 align-self-end">
<div class="user-given-languages"> <div class="userGivenLanguages">
<span class="label">Langue(s) proposée(s):</span> <span class="label">Langue(s) proposée(s):</span>
<span>Allemand, Croate</span> <span>Allemand, Croate</span>
</div> </div>
<div class="user-searched-languages"> <div class="userSearchedLanguages">
<span class="label">Langue(s) recherchée(s):</span> <span class="label">Langue(s) recherchée(s):</span>
<span>Français</span> <span>Français</span>
</div> </div>
<div class="user-main-language1"> <div class="userMainLanguage1">
<span class="label">Langue maternelle 1:</span> <span class="label">Langue maternelle 1:</span>
<span>Allemand</span> <span>Allemand</span>
</div> </div>
<div class="user-main-language2"> <div class="userMainLanguage2">
<span class="label">Langue maternelle 2:</span> <span class="label">Langue maternelle 2:</span>
<span>Croate</span> <span>Croate</span>
</div> </div>
</div> </div>
</div> </div>
<p class="user-description"> <p class="userDescription">
Ich möchte meine Französischkenntnisse v.A. mündlich verbessern um im Berufsalltag ungehemmter und einfacher kommunizieren zu können. Ist eingerostet, da ich es sehr wenig brauchte. Bin 39jährig, mag die Natur und Musik, habe 2 Töchter. Am liebsten möchte ich mich in Persona treffen, aber wir können auch mit online abwechseln. Kann zu Bürozeiten oder Do/Fr nach Feierabend. Ich möchte meine Französischkenntnisse v.A. mündlich verbessern um im Berufsalltag ungehemmter und einfacher kommunizieren zu können. Ist eingerostet, da ich es sehr wenig brauchte. Bin 39jährig, mag die Natur und Musik, habe 2 Töchter. Am liebsten möchte ich mich in Persona treffen, aber wir können auch mit online abwechseln. Kann zu Bürozeiten oder Do/Fr nach Feierabend.
</p> </p>
</div> </div>
<div class="profile-options"> <div class="profileOptions">
<button type="button" class="btn btn-cta rounded" >Proposer un TANDEM</button> <button type="button" class="btn btn-cta rounded" >Proposer un TANDEM</button>
<button type="button" class="btn btn-link" data-bs-toggle="modal" data-bs-target="#signal-modal">Signaler ce profil inapproprié</button> <button type="button" class="btn btn-link" data-bs-toggle="modal" data-bs-target="#signalModal">Signaler ce profil inapproprié</button>
</div> </div>
</div> </div>
</div> </div>
@ -3876,11 +3876,11 @@
</footer> </footer>
<!-- Modal --> <!-- Modal -->
<div class="modal fade" id="signal-modal" tabindex="-1" aria-label="Signaler un utilisateur" aria-hidden="true"> <div class="modal fade" id="signalModal" tabindex="-1" aria-label="Signaler un utilisateur" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable"> <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title">Signaler le profil de<br>{user-pseudo}</h5> <h5 class="modal-title">Signaler le profil de<br>{ userPseudo }</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
@ -3898,7 +3898,7 @@
</div> </div>
<div class="mt-3"> <div class="mt-3">
<label class="form-label">Précisions</label> <label class="form-label">Précisions</label>
<textarea name="signal-description" id="signal-description" class="form-control" placeholder="Précisez le motif de signalement" rows="4" maxlength="250"></textarea> <textarea name="signalDescription" id="signalDescription" class="form-control" placeholder="Précisez le motif de signalement" rows="4" maxlength="250"></textarea>
</div> </div>
<input type="hidden" id="userId" name="userId" value="12345" /> <input type="hidden" id="userId" name="userId" value="12345" />
</form> </form>
@ -3906,7 +3906,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">Envoyer</button> <button type="button" class="btn btn-primary">Signaler</button>
</div> </div>
</div> </div>
</div> </div>