Many changes

This commit is contained in:
ericb 2024-12-11 17:58:49 +01:00
parent 56081ba6f0
commit 801a3e25d3
9 changed files with 317 additions and 248 deletions

View file

@ -5,6 +5,7 @@
<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">
<meta name="description" content="Blabla">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png"> <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="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png"> <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
@ -13,7 +14,7 @@
<script src="static/js/vendor/bootstrap.bundle.min.js"></script> <script src="static/js/vendor/bootstrap.bundle.min.js"></script>
</head> </head>
<body data-platform="public" data-screen="404"> <body data-platform="public" data-screen="error404">
<header class="top-bar fixed-top"> <header class="top-bar fixed-top">
<div class="d-grid gap-3 align-items-center"> <div class="d-grid gap-3 align-items-center">
<nav class="navbar navbar-expand-lg bg-body-tertiary" aria-label="Main navigation"> <nav class="navbar navbar-expand-lg bg-body-tertiary" aria-label="Main navigation">

View file

@ -5,6 +5,7 @@
<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">
<meta name="description" content="Blabla">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png"> <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="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png"> <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">

View file

@ -5,6 +5,7 @@
<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">
<meta name="description" content="Blabla">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png"> <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="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png"> <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">

View file

@ -5,6 +5,7 @@
<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">
<meta name="description" content="Blabla">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png"> <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="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png"> <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
@ -13,7 +14,7 @@
<script src="static/js/vendor/bootstrap.bundle.min.js"></script> <script src="static/js/vendor/bootstrap.bundle.min.js"></script>
</head> </head>
<body data-screen="homepage"> <body data-platform="public" data-screen="homepage">
<header class="top-bar fixed-top"> <header class="top-bar fixed-top">
<div class="d-grid gap-3 align-items-center"> <div class="d-grid gap-3 align-items-center">
<nav class="navbar navbar-expand-lg bg-body-tertiary" aria-label="Main navigation"> <nav class="navbar navbar-expand-lg bg-body-tertiary" aria-label="Main navigation">
@ -76,7 +77,7 @@
<section id="tandemExplanations"> <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'apprendrai la mienne</p>
</header> </header>
<div class="container"> <div class="container">
@ -112,7 +113,7 @@
<img class="img-fluid" src="static/img/gfx2.png"> <img class="img-fluid" src="static/img/gfx2.png">
</div> </div>
<div class="col-lg-6 order-1 order-lg-2 align-content-center"> <div class="col-lg-6 order-1 order-lg-2 align-content-center">
<h1 class="display-6 fw-bold mb-3">Avec la méthode TANDEM<sup>&#x24C7;</sup></h1> <h1 class="display-6 fw-bold mb-3">Avec la méthode TANDEM</h1>
<ul> <ul>
<li>Vous pourrez pratiquer régulièrement la langue partenaire</li> <li>Vous pourrez pratiquer régulièrement la langue partenaire</li>
<li>Vous pourrez enrichir votre vocabulaire et développer un lexique</li> <li>Vous pourrez enrichir votre vocabulaire et développer un lexique</li>

View file

@ -5,6 +5,7 @@
<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">
<meta name="description" content="Blabla">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png"> <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="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png"> <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
@ -14,7 +15,7 @@
<script src="static/js/js.js"></script> <script src="static/js/js.js"></script>
</head> </head>
<body data-screen="profile"> <body data-platform="public" data-screen="profile">
<header class="top-bar fixed-top"> <header class="top-bar fixed-top">
<div class="d-grid gap-3 align-items-center"> <div class="d-grid gap-3 align-items-center">
<nav class="navbar navbar-expand-lg bg-body-tertiary" aria-label="Main navigation"> <nav class="navbar navbar-expand-lg bg-body-tertiary" aria-label="Main navigation">
@ -73,6 +74,7 @@
</svg> </svg>
Demandes envoyées</a> Demandes envoyées</a>
</li> </li>
<!-- if user has statistic privileges or is admin -->
<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" class="size-6">
@ -80,6 +82,7 @@
</svg> </svg>
Statistiques</a> Statistiques</a>
</li> </li>
<!-- endif -->
<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" class="size-6">
@ -88,6 +91,8 @@
Espace documentaire</a> Espace documentaire</a>
</li> </li>
</ul> </ul>
<!-- if user is Admin -->
<div class="separator menu-admin"> <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> <a class="btn-link" data-bs-toggle="collapse" href="#sideMenuAdmin" role="button" aria-expanded="false" aria-controls="sideMenuAdmin">Administration</a>
</div> </div>
@ -123,6 +128,7 @@
</li> </li>
</ul> </ul>
</div> </div>
<!-- endif -->
</nav> </nav>
<div id="sideLang" class="ms-auto"> <div id="sideLang" class="ms-auto">
@ -203,97 +209,229 @@
</ul> </ul>
</nav> </nav>
</div> </div>
<section id="profile" class="col-lg-8"> <section id="profile" class="col-lg-8">
<div class="alert alert-danger" role="alert">Eventuels messages d'alerte (erreurs de validation formulaire)</div>
<form> <form>
<section class="panel mb-3"> <section class="panel">
<h1 class="fs-2 mb-4">Informations générales</h1> <h1 class="fs-2 mb-4">Informations générales</h1>
<form> <form>
<div class="row g-3 align-items-center justify-content-between mb-3"> <div class="row gap-3 align-items-center">
<div class="col-auto"> <div class="col-md-6">
<div id="avatarContainer" class="row">
<div class="col-md-auto">
<div class="userAvatar"> <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>
</div>
<div class="col-md-auto">
<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="userProfileActivation" class="col-auto rounded"> </div>
<div class="form-check form-switch form-check-reverse"> </div>
<div id="userVisibility" class="col-md-5">
<div id="userProfileActivation" class="rounded">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="activateUserProfile"> <input class="form-check-input" type="checkbox" role="switch" id="activateUserProfile">
<label class="form-check-label" for="activateUserProfile">Rendre mon profil public</label> <label class="form-check-label" for="activateUserProfile">Activer mon profil</label>
</div> </div>
<a class="text-link" data-bs-toggle="tooltip" data-bs-trigger="hover click" data-bs-title="En activant cette option, vous serez visible dans les résultats de recherche TANDEM">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="icon-ui-md">
<path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
</svg>
</a>
</div> </div>
<!-- if user confederation or post-->
<div id="userVisibilityExtend" class="rounded mt-2">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="activateUserVisibility">
<label class="form-check-label" for="activateUserVisibility">Etre visible à l'externe</label>
</div> </div>
<div class="row g-3 align-items-center mb-3"> <a class="text-link" data-bs-toggle="tooltip" data-bs-trigger="hover click" data-bs-title="En activant cette option vous serez visible dans les résultats de recherches effectuées par les personnes hors de votre organisation">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="icon-ui-md">
<path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
</svg>
</a>
</div>
<!-- endif-->
</div>
</div>
<div id="userProfileInfos">
<div class="row align-items-center mt-3">
<div class="col-auto"> <div class="col-auto">
<label class="col-form-label">Pseudo</label> <label class="col-form-label">Pseudo</label>
</div> </div>
<div class="col-auto"> <div class="col-xl-5">
<input class="form-control" type="text" id="userPseudo" 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 mt-3">
<div class="col-auto"> <div class="col-auto">
<label class="col-form-label">Email</label> <label class="col-form-label">Email</label>
</div> </div>
<div class="col-md-5"> <div class="col-xl-5">
<input class="form-control" type="email" id="userMail" 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 mt-3">
<div class="col-auto"> <div class="col-auto">
<label class="col-form-label">Genre</label> <label class="col-form-label">Genre <span class="emphasis">*</span></label>
</div> </div>
<div class="col-md-5"> <div class="col-lg-auto col-xl-5">
<select class="form-select" id="userGender"> <select class="form-select" id="userGender" required>
<option>Homme</option> <option value="0" selected>Veuillez sélectionner une option</option>
<option>Femme</option> <option value="1">Homme</option>
<option>Non-binaire</option> <option value="2">Femme</option>
<option value="3">Non-binaire</option>
</select> </select>
</div> </div>
</div> </div>
<div class="row align-items-center mb-3">
<div class="col-auto">
<label class="col-form-label">Langue</label>
</div>
<div class="col-md-5">
<select class="form-select" id="userLang1">
<option>Français</option>
<option>Deutsch</option>
<option>Italiano</option>
<option>Rumantsch</option>
<option>English</option>
</select>
</div>
</div>
<div class="row align-items-center">
<div class="col-auto">
<label class="col-form-label">Langue</label>
</div>
<div class="col-md-5">
<select class="form-select" id="userLang2">
<option>Français</option>
<option>Deutsch</option>
<option>Italiano</option>
<option>Rumantsch</option>
<option>English</option>
</select>
</div>
</div> </div>
</form> </form>
</section> </section>
<section class="panel mb-3"> <section class="panel mt-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 den 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 den 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="userDescription">Présentation (500 caractères max.)</label> <label class="form-label" for="userDescription">Présentation (800 caractères max.)</label>
<textarea name="userDescription" id="userDescription" 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="800"></textarea>
</section> </section>
<section class="panel mb-3"> <section id="userLanguages" class="panel mt-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>
<p>Pour le bon fonctionnement de votre TANDEM, veuillez nindiquer que les langues pour lesquelles vous avez un niveau oral garantissant une communication fluide (niveau C1 du Cadre Européen Commun de Références pour les Langues).</p> <p>Pour le bon fonctionnement de votre TANDEM, veuillez nindiquer que les langues pour lesquelles vous avez un niveau oral garantissant une communication fluide (niveau C1 du Cadre Européen Commun de Références pour les Langues).</p>
<!-- lang 1 --> <button class="btn btn-cta" href="">Comment déterminer mon niveau de langue?</button>
<div class="row gx-md-5 align-items-center mb-3"> <h2 class="fs-4 mt-4">Langues premières</h2>
<div class="col-6"> <!-- Prime lang 1 -->
<label class="col-form-label" for="userFrontLang1">Langue</label> <div class="row gx-xl-5 align-items-center">
<select class="form-select" id="userFrontLang1"> <div class="col-md-6 col-xl-5">
<label class="col-form-label" for="userProposedPrimeLang1">Langue première 1 <span class="emphasis">*</span></label>
<select class="form-select" id="userProposedPrimeLang1" required>
<option value="" selected>Sélectionner une langue</option>
<option value="3">Allemand</option>
<option value="42">Suisse-allemand</option>
<option value="1">Français</option>
<option value="4">Italien</option>
<option value="64">Romanche</option>
<option value="2">Anglais</option>
<option value="6">Albanais</option>
<option value="7">Arabe</option>
<option value="62">Bengali</option>
<option value="10">Chinois</option>
<option value="67">Corse</option>
<option value="12">Croate</option>
<option value="47">Danois</option>
<option value="48">Estonien</option>
<option value="49">Finnois</option>
<option value="44">Grec</option>
<option value="61">Hindi/Ourdou</option>
<option value="43">Hollandais</option>
<option value="52">Irlandais</option>
<option value="53">Islandais</option>
<option value="22">Japonais</option>
<option value="24">Kurde</option>
<option value="54">Letton</option>
<option value="55">Lituanien</option>
<option value="25">Macédonien</option>
<option value="68">Hébreu</option>
<option value="66">Hébreux moderne</option>
<option value="56">Moldave</option>
<option value="65">Norvégien</option>
<option value="46">Persan (Farsi)</option>
<option value="45">Polonais</option>
<option value="32">Portugais</option>
<option value="58">Roumain</option>
<option value="34">Russe</option>
<option value="35">Serbe</option>
<option value="50">Suédois</option>
<option value="36">Slovaque</option>
<option value="59">Slovène</option>
<option value="14">Espagnol</option>
<option value="63">Tamoul</option>
<option value="57">Tchèque</option>
<option value="41">Turc</option>
<option value="51">Hongrois</option>
<option value="60">Ukrainien</option>
<option value="69">Catalan</option>
<option value="70">Indonésien</option>
<option value="71">Coréen</option>
<option value="72">Bulgare</option>
<option value="73">Pashto</option>
<option value="74">Catalan</option>
<option value="75">Dari</option>
<option value="76">Wolof</option>
</select>
</div>
<!-- Prime lang 2 -->
<div class="col-md-6 col-xl-5">
<label class="col-form-label" for="userProposedPrimeLang2">Langue première 2</label>
<select class="form-select" id="userProposedPrimeLang2">
<option value="" selected>Sélectionner une langue</option>
<option value="3">Allemand</option>
<option value="42">Suisse-allemand</option>
<option value="1">Français</option>
<option value="4">Italien</option>
<option value="64">Romanche</option>
<option value="2">Anglais</option>
<option value="6">Albanais</option>
<option value="7">Arabe</option>
<option value="62">Bengali</option>
<option value="10">Chinois</option>
<option value="67">Corse</option>
<option value="12">Croate</option>
<option value="47">Danois</option>
<option value="48">Estonien</option>
<option value="49">Finnois</option>
<option value="44">Grec</option>
<option value="61">Hindi/Ourdou</option>
<option value="43">Hollandais</option>
<option value="52">Irlandais</option>
<option value="53">Islandais</option>
<option value="22">Japonais</option>
<option value="24">Kurde</option>
<option value="54">Letton</option>
<option value="55">Lituanien</option>
<option value="25">Macédonien</option>
<option value="68">Hébreu</option>
<option value="66">Hébreux moderne</option>
<option value="56">Moldave</option>
<option value="65">Norvégien</option>
<option value="46">Persan (Farsi)</option>
<option value="45">Polonais</option>
<option value="32">Portugais</option>
<option value="58">Roumain</option>
<option value="34">Russe</option>
<option value="35">Serbe</option>
<option value="50">Suédois</option>
<option value="36">Slovaque</option>
<option value="59">Slovène</option>
<option value="14">Espagnol</option>
<option value="63">Tamoul</option>
<option value="57">Tchèque</option>
<option value="41">Turc</option>
<option value="51">Hongrois</option>
<option value="60">Ukrainien</option>
<option value="69">Catalan</option>
<option value="70">Indonésien</option>
<option value="71">Coréen</option>
<option value="72">Bulgare</option>
<option value="73">Pashto</option>
<option value="74">Catalan</option>
<option value="75">Dari</option>
<option value="76">Wolof</option>
</select>
</div>
</div>
<h2 class="fs-4 mt-4">Langues additionnelles</h2>
<!-- Additional lang 1 -->
<div class="row gx-xl-5 align-items-center mt-3">
<div class="col-md-6 col-xl-5">
<label class="col-form-label" for="userProposedAdditionalLang1">Langue additionnelle</label>
<select class="form-select" id="userProposedAdditionalLang1">
<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>
@ -302,47 +440,21 @@
<option>English</option> <option>English</option>
</select> </select>
</div> </div>
<div class="col-6"> <div class="col-md-6 col-xl-5">
<label class="col-form-label" for="userFrontLevel1">Niveau</label> <label class="col-form-label" for="userProposedAdditionalLevel1">Niveau</label>
<select class="form-select" id="userFrontLevel1"> <select class="form-select" id="userProposedAdditionalLevel1">
<option>Sélectionner un niveau</option> <option>Sélectionner le niveau</option>
<option>Elémentaire (A1 - A2)</option>
<option>Moyen (B1)</option>
<option>Bon (B2 - C1)</option>
<option>Excellent (C2)</option>
</select>
</div>
</div>
<!-- lang 2 -->
<div class="row gx-md-5 align-items-center mb-3">
<div class="col-6">
<label class="col-form-label visually-hidden" for="userFrontLang2">Langue 2</label>
<select class="form-select" id="userFrontLang2">
<option>Sélectionner une langue</option>
<option>Français</option>
<option>Deutsch</option>
<option>Italiano</option>
<option>Rumantsch</option>
<option>English</option>
</select>
</div>
<div class="col-6">
<label class="col-form-label visually-hidden" for="userFrontLevel2">Niveau 2</label>
<select class="form-select" id="userFrontLevel2">
<option>Sélectionner un niveau</option>
<option>Elémentaire (A1 - A2)</option>
<option>Moyen (B1)</option>
<option>Bon (B2 - C1)</option> <option>Bon (B2 - C1)</option>
<option>Excellent (C2)</option> <option>Excellent (C2)</option>
</select> </select>
</div> </div>
</div> </div>
<!-- lang 3 --> <!-- Additional lang 2 -->
<div class="row gx-md-5 align-items-center mb-3"> <div class="row gx-xl-5 align-items-center mt-3">
<div class="col-6"> <div class="col-md-6 col-xl-5">
<label class="col-form-label visually-hidden" for="userFrontLang3">Langue 3</label> <label class="col-form-label" for="userProposedAdditionalLang2">Langue additionnelle 2</label>
<select class="form-select" id="userFrontLang3"> <select class="form-select" id="userProposedAdditionalLang2">
<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>
@ -351,75 +463,26 @@
<option>English</option> <option>English</option>
</select> </select>
</div> </div>
<div class="col-6"> <div class="col-md-6 col-xl-5">
<label class="col-form-label visually-hidden" for="userFrontLevel3">Niveau 3</label> <label class="col-form-label" for="userProposedAdditionalLevel2">Niveau 2</label>
<select class="form-select" id="userFrontLevel3"> <select class="form-select" id="userProposedAdditionalLevel2">
<option>Sélectionner un niveau</option> <option>Sélectionner le niveau</option>
<option>Elémentaire (A1 - A2)</option>
<option>Moyen (B1)</option>
<option>Bon (B2 - C1)</option> <option>Bon (B2 - C1)</option>
<option>Excellent (C2)</option> <option>Excellent (C2)</option>
</select> </select>
</div> </div>
</div> </div>
<!-- lang 4 -->
<div class="row gx-md-5 align-items-center mb-3">
<div class="col-6">
<label class="col-form-label visually-hidden" for="userFrontLang4">Langue 4</label>
<select class="form-select" id="userFrontLang4">
<option>Sélectionner une langue</option>
<option>Français</option>
<option>Deutsch</option>
<option>Italiano</option>
<option>Rumantsch</option>
<option>English</option>
</select>
</div>
<div class="col-6">
<label class="col-form-label visually-hidden" for="userFrontLevel4">Niveau 4</label>
<select class="form-select" id="userFrontLevel4">
<option>Sélectionner un niveau</option>
<option>Elémentaire (A1 - A2)</option>
<option>Moyen (B1)</option>
<option>Bon (B2 - C1)</option>
<option>Excellent (C2)</option>
</select>
</div>
</div>
<!-- lang 5 -->
<div class="row gx-md-5 align-items-center mb-3">
<div class="col-6">
<label class="col-form-label visually-hidden" for="userFrontLang5">Langue 5</label>
<select class="form-select" id="userFrontLang5">
<option>Sélectionner une langue</option>
<option>Français</option>
<option>Deutsch</option>
<option>Italiano</option>
<option>Rumantsch</option>
<option>English</option>
</select>
</div>
<div class="col-6">
<label class="col-form-label visually-hidden" for="userFrontLevel5">Niveau 5</label>
<select class="form-select" id="userFrontLevel5">
<option>Sélectionner un niveau</option>
<option>Elémentaire (A1 - A2)</option>
<option>Moyen (B1)</option>
<option>Bon (B2 - C1)</option>
<option>Excellent (C2)</option>
</select>
</div>
</div>
</section> </section>
<section class="panel mb-3">
<section class="panel mt-3">
<h1 class="fs-2 mb-4">Langue(s) recherchée(s)</h1> <h1 class="fs-2 mb-4">Langue(s) recherchée(s)</h1>
<p>Indiquez les langues que vous souhaitez pratiquer pour vous perfectionner. Ces indications vous permettront de trouver plus facilement des possibilités de TANDEMs.</p>
<div class="row gx-xl-5 align-items-center">
<!-- lang 1 --> <!-- lang 1 -->
<div class="row gx-md-5 align-items-center mb-3"> <div class="col-md-6 col-xl-5">
<div class="col-md-6"> <label class="col-form-label" for="userRequestedLang1">Langue recherchée 1</label>
<label class="col-form-label visually-hidden" for="userRequestedLang1">Langue</label> <select class="form-select" id="userRequestedLang1" required>
<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>
@ -428,54 +491,10 @@
<option>English</option> <option>English</option>
</select> </select>
</div> </div>
</div>
<!-- lang 2 --> <!-- lang 2 -->
<div class="row gx-md-5 align-items-center mb-3"> <div class="col-md-6 col-xl-5">
<div class="col-md-6"> <label class="col-form-label" for="userRequestedLang2">Langue recherchée 2</label>
<label class="col-form-label visually-hidden" for="userRequestedLang2">Langue 2</label> <select class="form-select" id="userRequestedLang2" required>
<select class="form-select" id="userRequestedLang2">
<option>Sélectionner une langue</option>
<option>Français</option>
<option>Deutsch</option>
<option>Italiano</option>
<option>Rumantsch</option>
<option>English</option>
</select>
</div>
</div>
<!-- lang 3 -->
<div class="row gx-md-5 align-items-center mb-3">
<div class="col-md-6">
<label class="col-form-label visually-hidden" for="userRequestedLang3">Langue 3</label>
<select class="form-select" id="userRequestedLang3">
<option>Sélectionner une langue</option>
<option>Français</option>
<option>Deutsch</option>
<option>Italiano</option>
<option>Rumantsch</option>
<option>English</option>
</select>
</div>
</div>
<!-- lang 4 -->
<div class="row gx-md-5 align-items-center mb-3">
<div class="col-md-6">
<label class="col-form-label visually-hidden" for="userRequestedLang4">Langue 4</label>
<select class="form-select" id="userRequestedLang4">
<option>Sélectionner une langue</option>
<option>Français</option>
<option>Deutsch</option>
<option>Italiano</option>
<option>Rumantsch</option>
<option>English</option>
</select>
</div>
</div>
<!-- lang 5 -->
<div class="row gx-md-5 align-items-center">
<div class="col-md-6">
<label class="col-form-label visually-hidden" for="userRequestedLang5">Langue 5</label>
<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>
@ -486,10 +505,9 @@
</div> </div>
</div> </div>
</section> </section>
<section id="tandem-meet" class="panel mb-3"> <section id="tandem-meet" class="panel mt-3">
<h1 class="fs-2 mb-4">TANDEMs</h1> <h1 class="fs-2 mb-4">Mode de rencontre souhaité</h1>
<div class="row mb-3"> <div class="row">
<label class="form-label">Mode de rencontre souhaité</label>
<div class="col"> <div class="col">
<div> <div>
<img src="static/img/picto_rencontre-sur-place.svg" class="img-fluid"> <img src="static/img/picto_rencontre-sur-place.svg" class="img-fluid">
@ -518,7 +536,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-lg-6"> <div id="userTandemMeetLocation" class="col-lg-6 mt-3">
<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="userTandemMeetTown">Lieu de rencontre souhaité</label> <label class="col-form-label" for="userTandemMeetTown">Lieu de rencontre souhaité</label>
@ -536,7 +554,7 @@
</div> </div>
</div> </div>
</section> </section>
<button type="button" class="btn btn-cta rounded w-100 py-3" type="submit">Sauvegarder les modifications</button> <button type="button" class="btn btn-cta rounded w-100 py-3 my-4" type="submit">Sauvegarder les modifications</button>
</form> </form>
</section> </section>
</div> </div>

View file

@ -37,9 +37,9 @@ body {
h1, h2, h3, h4, h5{ h1, h2, h3, h4, h5{
font-family: var(--bs-ttl-font-family); font-family: var(--bs-ttl-font-family);
} }
::selection, ::-moz-selection { /* ::selection, ::-moz-selection {
text-shadow: none; text-shadow: none;
} } */
.navbar-toggler{ .navbar-toggler{
color: var(--bs-btn-hover-bg); color: var(--bs-btn-hover-bg);
} }
@ -179,25 +179,44 @@ h1, h2, h3, h4, h5{
padding: var(--div-padding); padding: var(--div-padding);
border-radius: 0.5rem; border-radius: 0.5rem;
} }
/* #profile label{ #profile label{
font-weight: 700; font-weight: 700;
} */
#userProfileActivation{
padding: 1.5em;
background-color: var(--accent-light);
} }
#activateUserProfile{ #userVisibility{
margin-left: 1em; margin-left: auto;
}
#userProfileActivation, #userVisibilityExtend{
display: flex;
align-items: center;
}
#userProfileActivation{
/* padding: 1.5em;
background-color: var(--accent-light); */
}
#userProfileInfos label{
min-width: 6em;
}
.form-check.form-switch{
margin-bottom: 0;
}
.form-switch:not(.form-check-reverse) input, .form-switch.form-check-reverse input{
margin-right: .75rem;
margin-top: 0; margin-top: 0;
width: 3em; width: 3rem;
height: 1.5em; height: 1.5rem;
}
.form-switch.form-check-reverse input{
margin-left: .75rem;
margin-right: 0;
}
.form-switch + a[data-bs-toggle="tooltip"]{
margin-left: 0.25rem;
} }
#tandem-meet .col{ #tandem-meet .col{
text-align: center; text-align: center;
padding: 1.5rem; padding: 1.5rem;
transition: all ease-out 0.3s; transition: all ease-out 0.3s;
} }
#tandem-meet .col img{ #tandem-meet .col img{
margin-bottom: 1rem; margin-bottom: 1rem;
} }
@ -287,6 +306,9 @@ article li:not(:first-of-type){
display: flex; display: flex;
gap: 1rem; gap: 1rem;
} }
#avatarContainer{
align-items: center;
}
/* search filters */ /* search filters */
#searchFilters{ #searchFilters{
@ -432,6 +454,10 @@ footer a img{
height: 1.25em; height: 1.25em;
margin-right: 0.65em; margin-right: 0.65em;
} }
.icon-ui-md{
width: 1.5em;
height: 1.5em;
}
nav .icon-ui{ nav .icon-ui{
display: inline-flex; display: inline-flex;
margin-right: .75rem; margin-right: .75rem;
@ -473,6 +499,9 @@ nav .icon-ui{
h1, h2, h3, h4{ h1, h2, h3, h4{
text-align: center; text-align: center;
} }
#avatarContainer{
text-align: center;
}
.profileOptions{ .profileOptions{
display: grid; display: grid;
gap: 0 .5rem; gap: 0 .5rem;
@ -550,6 +579,9 @@ nav .icon-ui{
.partners-logo-grid{ .partners-logo-grid{
grid-template-columns: repeat(auto-fit, minmax(10em, 1fr)); grid-template-columns: repeat(auto-fit, minmax(10em, 1fr));
} }
div:not(#userLanguage) h1, div:not(#userLanguage) h2, div:not(#userLanguage) h3, div:not(#userLanguage) h4{
text-align: left;
}
} }
@media (hover: hover) { @media (hover: hover) {
.btn-cta:hover{ .btn-cta:hover{

View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width="1.5em" height="1.5em" >
<path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
</svg>

After

Width:  |  Height:  |  Size: 365 B

View file

@ -3,6 +3,7 @@ function initTooltips(section) {
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]'); const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
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('#cgvCheck'); const checkTerms = document.querySelector('#cgvCheck');
const createAccountButton = document.querySelector('#btnCreateAccount'); const createAccountButton = document.querySelector('#btnCreateAccount');
@ -10,22 +11,32 @@ function checkTermsandConditions(){
} }
document.addEventListener("DOMContentLoaded", function() { document.addEventListener("DOMContentLoaded", function() {
const offmenu = document.getElementById("offSideMenu"); const offmenu = document.getElementById("offSideMenu"),
const sidemenu = document.getElementById("secondNav"); sidemenu = document.getElementById("secondNav");
function toggleMenus(mediaQuery) { const toggleMenus = ({ matches }) => {
if (!mediaQuery.matches) { if(offmenu && sidemenu){
offmenu.style.display = "none"; offmenu.style.display = matches ? "block" : "none";
sidemenu.style.display = "block"; sidemenu.style.display = matches ? "none" : "block";
} else {
offmenu.style.display = "block";
sidemenu.style.display = "none";
}
} }
};
const mediaQuery = window.matchMedia("(max-width: 992px)"); const mediaQuery = window.matchMedia("(max-width: 992px)");
toggleMenus(mediaQuery); // Initial check
mediaQuery.addEventListener('change', (e) => toggleMenus(e));
mediaQuery.addEventListener('change', toggleMenus);
const meetOption1 = document.getElementById('userMeetOptionReal'),
meetOption2 = document.getElementById('userMeetOptionVirtual'),
meetOption3 = document.getElementById('userMeetOptionHybrid'),
meetLocation = document.getElementById('userTandemMeetLocation');
const updateMeet = () => {
if (meetLocation) {meetLocation.style.display = (meetOption1?.checked || meetOption3?.checked) ? 'block' : 'none'; }
};
[meetOption1, meetOption2, meetOption3].forEach(option => { if (option) { option.addEventListener('change', updateMeet); }} );
updateMeet();
initTooltips(document); initTooltips(document);
toggleMenus(mediaQuery); // Initial check
}); });

View file

@ -5,6 +5,7 @@
<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">
<meta name="description" content="Blabla">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png"> <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="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png"> <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
@ -14,7 +15,7 @@
<script src="static/js/js.js"></script> <script src="static/js/js.js"></script>
</head> </head>
<body data-screen="search"> <body data-platform="public" data-screen="search">
<header class="top-bar fixed-top"> <header class="top-bar fixed-top">
<div class="d-grid gap-3 align-items-center"> <div class="d-grid gap-3 align-items-center">
<nav class="navbar navbar-expand-lg bg-body-tertiary" aria-label="Main navigation"> <nav class="navbar navbar-expand-lg bg-body-tertiary" aria-label="Main navigation">