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 name="robots" content="noindex">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Blabla">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
@ -14,7 +15,7 @@
<script src="static/js/js.js"></script>
</head>
<body data-screen="profile">
<body data-platform="public" data-screen="profile">
<header class="top-bar fixed-top">
<div class="d-grid gap-3 align-items-center">
<nav class="navbar navbar-expand-lg bg-body-tertiary" aria-label="Main navigation">
@ -73,6 +74,7 @@
</svg>
Demandes envoyées</a>
</li>
<!-- if user has statistic privileges or is admin -->
<li class="nav-item">
<a href="#" role="menuitem" class="nav-link">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon-ui" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
@ -80,6 +82,7 @@
</svg>
Statistiques</a>
</li>
<!-- endif -->
<li class="nav-item">
<a href="#" role="menuitem" class="nav-link">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon-ui" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
@ -88,6 +91,8 @@
Espace documentaire</a>
</li>
</ul>
<!-- if user is 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>
</div>
@ -123,6 +128,7 @@
</li>
</ul>
</div>
<!-- endif -->
</nav>
<div id="sideLang" class="ms-auto">
@ -203,121 +209,229 @@
</ul>
</nav>
</div>
<section id="profile" class="col-lg-8">
<div class="alert alert-danger" role="alert">Eventuels messages d'alerte (erreurs de validation formulaire)</div>
<form>
<section class="panel mb-3">
<section class="panel">
<h1 class="fs-2 mb-4">Informations générales</h1>
<form>
<div class="row g-3 align-items-center justify-content-between mb-3">
<div class="col-auto">
<div class="userAvatar">
<img src="static/img/avatars/default-avatar.svg" class="img-fluid">
</div>
<button type="button" class="btn btn-cta">Télécharger une image</button>
</div>
<div id="userProfileActivation" class="col-auto rounded">
<div class="form-check form-switch form-check-reverse">
<input class="form-check-input" type="checkbox" role="switch" id="activateUserProfile">
<label class="form-check-label" for="activateUserProfile">Rendre mon profil public</label>
<div class="row gap-3 align-items-center">
<div class="col-md-6">
<div id="avatarContainer" class="row">
<div class="col-md-auto">
<div class="userAvatar">
<img src="static/img/avatars/default-avatar.svg" class="img-fluid">
</div>
</div>
<div class="col-md-auto">
<button type="button" class="btn btn-cta">Télécharger une image</button>
</div>
</div>
</div>
</div>
<div class="row g-3 align-items-center mb-3">
<div class="col-auto">
<label class="col-form-label">Pseudo</label>
</div>
<div class="col-auto">
<input class="form-control" type="text" id="userPseudo" placeholder="Forum du Bilinguisme" disabled readonly>
<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">
<label class="form-check-label" for="activateUserProfile">Activer mon profil</label>
</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>
<!-- 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>
<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 class="row align-items-center mb-3">
<div class="col-auto">
<label class="col-form-label">Email</label>
<div id="userProfileInfos">
<div class="row align-items-center mt-3">
<div class="col-auto">
<label class="col-form-label">Pseudo</label>
</div>
<div class="col-xl-5">
<input class="form-control" type="text" id="userPseudo" placeholder="Forum du Bilinguisme" disabled readonly>
</div>
</div>
<div class="col-md-5">
<input class="form-control" type="email" id="userMail" placeholder="forum@zweisprachigkeit.ch" disabled readonly>
</div>
</div>
<div class="row align-items-center mb-3">
<div class="col-auto">
<label class="col-form-label">Genre</label>
</div>
<div class="col-md-5">
<select class="form-select" id="userGender">
<option>Homme</option>
<option>Femme</option>
<option>Non-binaire</option>
</select>
</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 class="row align-items-center mt-3">
<div class="col-auto">
<label class="col-form-label">Email</label>
</div>
<div class="col-xl-5">
<input class="form-control" type="email" id="userMail" placeholder="forum@zweisprachigkeit.ch" disabled readonly>
</div>
</div>
<div class="row align-items-center mt-3">
<div class="col-auto">
<label class="col-form-label">Genre <span class="emphasis">*</span></label>
</div>
<div class="col-lg-auto col-xl-5">
<select class="form-select" id="userGender" required>
<option value="0" selected>Veuillez sélectionner une option</option>
<option value="1">Homme</option>
<option value="2">Femme</option>
<option value="3">Non-binaire</option>
</select>
</div>
</div>
</div>
</form>
</section>
<section class="panel mb-3">
<section class="panel mt-3">
<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>
<label class="form-label" for="userDescription">Présentation (500 caractères max.)</label>
<textarea name="userDescription" id="userDescription" class="form-control" placeholder="Entrez votre présentation" rows="4" maxlength="500"></textarea>
<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="800"></textarea>
</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>
<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 -->
<div class="row gx-md-5 align-items-center mb-3">
<div class="col-6">
<label class="col-form-label" for="userFrontLang1">Langue</label>
<select class="form-select" id="userFrontLang1">
<option>Sélectionner une langue</option>
<option>Français</option>
<option>Deutsch</option>
<option>Italiano</option>
<option>Rumantsch</option>
<option>English</option>
<button class="btn btn-cta" href="">Comment déterminer mon niveau de langue?</button>
<h2 class="fs-4 mt-4">Langues premières</h2>
<!-- Prime lang 1 -->
<div class="row gx-xl-5 align-items-center">
<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>
<div class="col-6">
<label class="col-form-label" for="userFrontLevel1">Niveau</label>
<select class="form-select" id="userFrontLevel1">
<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>
<!-- 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>
<!-- 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">
<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>Français</option>
<option>Deutsch</option>
@ -326,23 +440,21 @@
<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>
<div class="col-md-6 col-xl-5">
<label class="col-form-label" for="userProposedAdditionalLevel1">Niveau</label>
<select class="form-select" id="userProposedAdditionalLevel1">
<option>Sélectionner le niveau</option>
<option>Bon (B2 - C1)</option>
<option>Excellent (C2)</option>
</select>
</div>
</div>
<!-- lang 3 -->
<div class="row gx-md-5 align-items-center mb-3">
<div class="col-6">
<label class="col-form-label visually-hidden" for="userFrontLang3">Langue 3</label>
<select class="form-select" id="userFrontLang3">
<!-- Additional lang 2 -->
<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="userProposedAdditionalLang2">Langue additionnelle 2</label>
<select class="form-select" id="userProposedAdditionalLang2">
<option>Sélectionner une langue</option>
<option>Français</option>
<option>Deutsch</option>
@ -351,75 +463,26 @@
<option>English</option>
</select>
</div>
<div class="col-6">
<label class="col-form-label visually-hidden" for="userFrontLevel3">Niveau 3</label>
<select class="form-select" id="userFrontLevel3">
<option>Sélectionner un niveau</option>
<option>Elémentaire (A1 - A2)</option>
<option>Moyen (B1)</option>
<div class="col-md-6 col-xl-5">
<label class="col-form-label" for="userProposedAdditionalLevel2">Niveau 2</label>
<select class="form-select" id="userProposedAdditionalLevel2">
<option>Sélectionner le niveau</option>
<option>Bon (B2 - C1)</option>
<option>Excellent (C2)</option>
</select>
</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 class="panel mb-3">
<section class="panel mt-3">
<h1 class="fs-2 mb-4">Langue(s) recherchée(s)</h1>
<!-- lang 1 -->
<div class="row gx-md-5 align-items-center mb-3">
<div class="col-md-6">
<label class="col-form-label visually-hidden" for="userRequestedLang1">Langue</label>
<select class="form-select" id="userRequestedLang1">
<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 -->
<div class="col-md-6 col-xl-5">
<label class="col-form-label" for="userRequestedLang1">Langue recherchée 1</label>
<select class="form-select" id="userRequestedLang1" required>
<option>Sélectionner une langue</option>
<option>Français</option>
<option>Deutsch</option>
@ -428,54 +491,10 @@
<option>English</option>
</select>
</div>
</div>
<!-- lang 2 -->
<div class="row gx-md-5 align-items-center mb-3">
<div class="col-md-6">
<label class="col-form-label visually-hidden" for="userRequestedLang2">Langue 2</label>
<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">
<!-- lang 2 -->
<div class="col-md-6 col-xl-5">
<label class="col-form-label" for="userRequestedLang2">Langue recherchée 2</label>
<select class="form-select" id="userRequestedLang2" required>
<option>Sélectionner une langue</option>
<option>Français</option>
<option>Deutsch</option>
@ -486,10 +505,9 @@
</div>
</div>
</section>
<section id="tandem-meet" class="panel mb-3">
<h1 class="fs-2 mb-4">TANDEMs</h1>
<div class="row mb-3">
<label class="form-label">Mode de rencontre souhaité</label>
<section id="tandem-meet" class="panel mt-3">
<h1 class="fs-2 mb-4">Mode de rencontre souhaité</h1>
<div class="row">
<div class="col">
<div>
<img src="static/img/picto_rencontre-sur-place.svg" class="img-fluid">
@ -518,7 +536,7 @@
</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="col-auto">
<label class="col-form-label" for="userTandemMeetTown">Lieu de rencontre souhaité</label>
@ -536,7 +554,7 @@
</div>
</div>
</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>
</section>
</div>