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

updates

Browse source
This commit is contained in:
ericb 2024-12-06 07:22:47 +01:00
parent 46aa198fad
commit e44c65cbce
9 changed files with 602 additions and 381 deletions
Download patch file Download diff file Expand all files Collapse all files

823
profile.html
View file

@ -12,7 +12,7 @@
<script src="static/js/js.js"></script>
</head>
<body>
<body 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">
@ -23,15 +23,107 @@
<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">
<span class="custom-toggler navbar-toggler-icon"></span>
</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" data-bs-scroll="false">
<!-- <div class="offcanvas-header">
<button type="button" type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close main menu"></button>
</div> -->
<div class="offcanvas-body">
<ul class="navbar-nav">
<nav class="side-menu" id="offSideMenu">
<div class="user-avatar">
<img src="static/img/avatars/default-avatar.svg" alt="Priscilla">
<p class="user-pseudo">Forum du Bilinguisme</p>
</div>
<ul class="nav">
<li class="nav-item">
<a href="#" role="menuitem" class="nav-link">
<svg xmlns="http://www.w3.org/2000/svg" class="icon-ui" fill="none" class="icon-ui" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
<path stroke-linecap="round" stroke-linejoin="round" d="m15.75 15.75-2.489-2.489m0 0a3.375 3.375 0 1 0-4.773-4.773 3.375 3.375 0 0 0 4.774 4.774ZM21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
</svg>
Rechercher des TANDEMs</a>
</li>
<li class="nav-item">
<a href="#" role="menuitem" class="nav-link">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon-ui" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 0 1-.825-.242m9.345-8.334a2.126 2.126 0 0 0-.476-.095 48.64 48.64 0 0 0-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0 0 11.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155" />
</svg>
Mes TANDEMs
</ul>
<div class="d-flex align-items-center gap-2 ms-auto">
</a>
</li>
<li class="nav-item">
<a href="profile.html" role="menuitem" class="nav-link active" aria-current="page">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon-ui" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 9h3.75M15 12h3.75M15 15h3.75M4.5 19.5h15a2.25 2.25 0 0 0 2.25-2.25V6.75A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25v10.5A2.25 2.25 0 0 0 4.5 19.5Zm6-10.125a1.875 1.875 0 1 1-3.75 0 1.875 1.875 0 0 1 3.75 0Zm1.294 6.336a6.721 6.721 0 0 1-3.17.789 6.721 6.721 0 0 1-3.168-.789 3.376 3.376 0 0 1 6.338 0Z" />
</svg>
Mon profil</a>
</li>
<li class="nav-item">
<a href="#" role="menuitem" class="nav-link">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon-ui" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 3.75H6.912a2.25 2.25 0 0 0-2.15 1.588L2.35 13.177a2.25 2.25 0 0 0-.1.661V18a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18v-4.162c0-.224-.034-.447-.1-.661L19.24 5.338a2.25 2.25 0 0 0-2.15-1.588H15M2.25 13.5h3.86a2.25 2.25 0 0 1 2.012 1.244l.256.512a2.25 2.25 0 0 0 2.013 1.244h3.218a2.25 2.25 0 0 0 2.013-1.244l.256-.512a2.25 2.25 0 0 1 2.013-1.244h3.859M12 3v8.25m0 0-3-3m3 3 3-3" />
</svg>
Demandes reçues <span class="badge rounded-pill ms-2">101</span></a>
</li>
<li class="nav-item">
<a href="#" role="menuitem" class="nav-link">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon-ui" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path d="M9,3.75h-2.09c-.99,0-1.86.64-2.15,1.59l-2.41,7.84c-.07.21-.1.44-.1.66v4.16c0,1.24,1.01,2.25,2.25,2.25h15c1.24,0,2.25-1.01,2.25-2.25v-4.16c0-.22-.03-.45-.1-.66l-2.41-7.84c-.29-.94-1.16-1.59-2.15-1.59h-2.09M2.25,13.5h3.86c.85,0,1.63.48,2.01,1.24l.26.51c.38.76,1.16,1.24,2.01,1.24h3.22c.85,0,1.63-.48,2.01-1.24l.26-.51c.38-.76,1.16-1.24,2.01-1.24h3.86M12,13.25V5M12,5l3,3M12,5l-3,3" style="fill: none; stroke: #000; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5px;"/>
</svg>
Demandes envoyées</a>
</li>
<li class="nav-item">
<a href="#" role="menuitem" class="nav-link">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon-ui" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3v11.25A2.25 2.25 0 0 0 6 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0 1 18 16.5h-2.25m-7.5 0h7.5m-7.5 0-1 3m8.5-3 1 3m0 0 .5 1.5m-.5-1.5h-9.5m0 0-.5 1.5m.75-9 3-3 2.148 2.148A12.061 12.061 0 0 1 16.5 7.605" />
</svg>
Statistiques</a>
</li>
<li class="nav-item">
<a href="#" role="menuitem" class="nav-link">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon-ui" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18a8.967 8.967 0 0 0-6 2.292m0-14.25v14.25" />
</svg>
Espace documentaire</a>
</li>
</ul>
<div class="separator menu-admin">
<a class="btn-link" data-bs-toggle="collapse" href="#sideMenuAdmin" role="button" aria-expanded="false" aria-controls="sideMenuAdmin">Administration</a>
</div>
<div id="sideMenuAdmin" class="collapse">
<ul class="nav">
<li class="nav-item">
<a href="#" role="menuitem" class="nav-link">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="icon-ui">
<path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z" />
</svg>
Gérer les comptes</a>
</li>
<li class="nav-item">
<a href="#" role="menuitem" class="nav-link">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="icon-ui">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z" />
</svg>
Gérer les signalements</a>
</li>
<li class="nav-item">
<a href="#" role="menuitem" class="nav-link">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="icon-ui">
<path stroke-linecap="round" stroke-linejoin="round" d="m10.5 21 5.25-11.25L21 21m-9-3h7.5M3 5.621a48.474 48.474 0 0 1 6-.371m0 0c1.12 0 2.233.038 3.334.114M9 5.25V3m3.334 2.364C11.176 10.658 7.69 15.08 3 17.502m9.334-12.138c.896.061 1.785.147 2.666.257m-4.589 8.495a18.023 18.023 0 0 1-3.827-5.802" />
</svg>
Langues</a>
</li>
<li class="nav-item">
<a href="#" role="menuitem" class="nav-link">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="icon-ui">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25ZM6.75 12h.008v.008H6.75V12Zm0 3h.008v.008H6.75V15Zm0 3h.008v.008H6.75V18Z" />
</svg>
Dictionnaire</a>
</li>
</ul>
</div>
</nav>
<div id="side-lang" class="ms-auto">
<div class="col">
<label for="lang">Choisir la langue</label>
<select id="lang" class="lang-select form-select form-select-sm" aria-label="Select language">
@ -41,371 +133,434 @@
<option>Rumantsch</option>
<option>English</option>
</select>
</div>
<!-- <a class="btn btn-sm btn-cta rounded col-auto" href="connect.html">Se connecter</a> -->
</div>
</div>
</div>
</div>
</div>
</nav>
</div>
</header>
<main data-screen="profile">
<main>
<div class="hero hero-secondary container-fluid">
<div>
<div class="container">
<div class="col-lg-8">
<div class="row">
<div class="col-lg-6 bottom-anchored order-2 order-lg-1 ">
<img class="img-fluid" src="static/img/ban-4.png">
</div>
<div class="col-lg-6 order-1 order-lg-2">
<h1 class="display-5 fw-bold lh-1 mb-3 mb-lg-5">Mon profil</h1>
<p class="lead">La méthode TANDEM vous ouvre un nouvel horizon d’apprentissage.<br> A l’inverse des cours de langues traditionnels, l’accent est mis sur la communication orale.</p>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br>Aenean id dui auctor, viverra augue facilisis, accumsan arcu. Suspendisse sollicitudin laoreet lacus eu varius. </p>
</div>
</div>
</div>
</div>
<section id="profile" class="container my-5">
<form>
<section class="panel mb-3">
<h1 class="fs-2 mb-4">Informations générales</h1>
<section class="container-fluid">
<div class="row my-3">
<div id="secondary-nav" class="col-lg-3">
<nav class="side-menu">
<ul class="nav flex-column mb-auto">
<li class="nav-item">
<a href="#" role="menuitem" class="nav-link active" aria-current="page">Rechercher des TANDEMs</a>
</li>
<li class="nav-item">
<a href="#" role="menuitem" class="nav-link">Mes TANDEMs</a>
</li>
<li class="nav-item">
<a href="profile.html" role="menuitem" class="nav-link">Mon profil</a>
</li>
<li class="nav-item">
<a href="#" role="menuitem" class="nav-link">Demandes reçues <span class="badge rounded-pill">101</span></a>
</li>
<li class="nav-item">
<a href="#" role="menuitem" class="nav-link">Demandes envoyées</a>
</li>
<li class="nav-item">
<a href="#" role="menuitem" class="nav-link">Statistiques</a>
</li>
<li class="nav-item">
<a href="#" role="menuitem" class="nav-link">Espace documentaire</a>
</li>
</ul>
<div class="separator menu-admin">Admin</div>
<ul class="nav flex-column mb-auto">
<li class="nav-item">
<a href="#" role="menuitem" class="nav-link">Gérer les comptes</a>
</li>
<li class="nav-item">
<a href="#" role="menuitem" class="nav-link">Gérer les signalements</a>
</li>
<li class="nav-item">
<a href="#" role="menuitem" class="nav-link">Langues</a>
</li>
<li class="nav-item">
<a href="#" role="menuitem" class="nav-link">Dictionnaire</a>
</li>
</ul>
</nav>
</div>
<section id="profile" class="col-lg-8">
<form>
<div class="row g-3 align-items-center justify-content-between mb-3">
<div class="col-auto">
<div class="user-avatar">
<img src="static/img/avatars/default-avatar.svg" class="img-fluid">
<section class="panel mb-3">
<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="user-avatar">
<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="user-profile-activation" class="col-auto rounded">
<div class="form-check form-switch form-check-reverse">
<input class="form-check-input" type="checkbox" role="switch" id="activate-user-profile">
<label class="form-check-label" for="activate-user-profile">Rendre mon profil public</label>
</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="user-pseudo" placeholder="Forum du Bilinguisme" disabled readonly>
</div>
</div>
<button type="button" class="btn btn-cta">Télécharger une image</button>
</div>
<div id="user-profile-activation" class="col-auto rounded">
<div class="form-check form-switch form-check-reverse">
<input class="form-check-input" type="checkbox" role="switch" id="activate-user-profile">
<label class="form-check-label" for="activate-user-profile">Rendre mon profil public</label>
<div class="row align-items-center mb-3">
<div class="col-auto">
<label class="col-form-label">Email</label>
</div>
<div class="col-md-5">
<input class="form-control" type="email" id="user-mail" 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="user-gender">
<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="user-lang1">
<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="user-lang2">
<option>Français</option>
<option>Deutsch</option>
<option>Italiano</option>
<option>Rumantsch</option>
<option>English</option>
</select>
</div>
</div>
</form>
</section>
<section class="panel mb-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 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>
<textarea name="user-description" id="user-description" class="form-control" placeholder="Entrez votre présentation" rows="4" maxlength="500"></textarea>
</section>
<section class="panel mb-3">
<h1 class="fs-2 mb-4">Langue(s) proposée(s)</h1>
<p>Pour le bon fonctionnement de votre TANDEM, veuillez n’indiquer 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="user-front-lang1">Langue</label>
<select class="form-select" id="user-front-lang1">
<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" for="user-front-level1">Niveau</label>
<select class="form-select" id="user-front-level1">
<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>
</div>
<div class="row g-3 align-items-center mb-3">
<div class="col-auto">
<label class="col-form-label">Pseudo</label>
<!-- 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="user-front-lang2">Langue 2</label>
<select class="form-select" id="user-front-lang2">
<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="user-front-level2">Niveau 2</label>
<select class="form-select" id="user-front-level2">
<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>
<div class="col-auto">
<input class="form-control" type="text" id="user-pseudo" placeholder="Hot's Design" disabled readonly>
<!-- 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="user-front-lang3">Langue 3</label>
<select class="form-select" id="user-front-lang3">
<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="user-front-level3">Niveau 3</label>
<select class="form-select" id="user-front-level3">
<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>
</div>
<div class="row align-items-center mb-3">
<div class="col-auto">
<label class="col-form-label">Email</label>
<!-- 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="user-front-lang4">Langue 4</label>
<select class="form-select" id="user-front-lang4">
<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="user-front-level4">Niveau 4</label>
<select class="form-select" id="user-front-level4">
<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>
<div class="col-md-5">
<input class="form-control" type="email" id="user-mail" placeholder="forum@zweisprachigkeit.ch" disabled readonly>
<!-- 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="user-front-lang5">Langue 5</label>
<select class="form-select" id="user-front-lang5">
<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="user-front-level5">Niveau 5</label>
<select class="form-select" id="user-front-level5">
<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>
</div>
<div class="row align-items-center mb-3">
<div class="col-auto">
<label class="col-form-label">Genre</label>
</section>
<section class="panel mb-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="user-requested-lang1">Langue</label>
<select class="form-select" id="user-requested-lang1">
<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>
<div class="col-md-5">
<select class="form-select" id="user-gender">
<option>Homme</option>
<option>Femme</option>
<option>Non-binaire</option>
</select>
<!-- 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="user-requested-lang2">Langue 2</label>
<select class="form-select" id="user-requested-lang2">
<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>
</div>
<div class="row align-items-center mb-3">
<div class="col-auto">
<label class="col-form-label">Langue</label>
<!-- 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="user-requested-lang3">Langue 3</label>
<select class="form-select" id="user-requested-lang3">
<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>
<div class="col-md-5">
<select class="form-select" id="user-lang1">
<option>Français</option>
<option>Deutsch</option>
<option>Italiano</option>
<option>Rumantsch</option>
<option>English</option>
</select>
<!-- 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="user-requested-lang4">Langue 4</label>
<select class="form-select" id="user-requested-lang4">
<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>
</div>
<div class="row align-items-center">
<div class="col-auto">
<label class="col-form-label">Langue</label>
<!-- lang 5 -->
<div class="row gx-md-5 align-items-center">
<div class="col-md-6">
<label class="col-form-label visually-hidden" for="user-requested-lang5">Langue 5</label>
<select class="form-select" id="user-requested-lang5">
<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>
<div class="col-md-5">
<select class="form-select" id="user-lang2">
<option>Français</option>
<option>Deutsch</option>
<option>Italiano</option>
<option>Rumantsch</option>
<option>English</option>
</select>
</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>
<div class="col">
<div>
<img src="static/img/picto_rencontre-sur-place.svg" class="img-fluid">
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="userMeetOptions" id="userMeetOptionReal" value="option1">
<label class="form-check-label" for="userMeetOptionReal">Sur place, en face à face</label>
</div>
</div>
<div class="col">
<div>
<img src="static/img/picto_rencontre-virtuelle.svg" class="img-fluid">
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="userMeetOptions" id="userMeetOptionVirtual" value="option2">
<label class="form-check-label" for="userMeetOptionVirtual">Virtuel (Skype, FaceTime, etc.)</label>
</div>
</div>
<div class="col">
<div>
<img src="static/img/picto_rencontre-sur-place-et-virtuel.svg" class="img-fluid">
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="userMeetOptions" id="userMeetOptionHybrid" value="option3">
<label class="form-check-label" for="userMeetOptionHybrid">Sur place et virtuel</label>
</div>
</div>
</div>
</div>
</form>
<div class="col-lg-6">
<div class="row gx-md-5 align-items-center">
<div class="col-auto">
<label class="col-form-label" for="user-tandem-meet-town">Lieu de rencontre souhaité</label>
</div>
<div class="col-md-auto">
<select class="form-select" id="user-tandem-meet-town">
<option>Sélectionner une commune</option>
<option>Biel/Bienne</option>
<option>Genève</option>
<option>Lausanne</option>
<option>Bern</option>
<option>Solothurn</option>
</select>
</div>
</div>
</div>
</section>
<button type="button" class="btn btn-cta rounded w-100 py-3" type="submit">Sauvegarder les modifications</button>
</form>
</section>
<section class="panel mb-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 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>
<textarea name="user-description" id="user-description" class="form-control" placeholder="Entrez votre présentation" rows="4" maxlength="500"></textarea>
</section>
<section class="panel mb-3">
<h1 class="fs-2 mb-4">Langue(s) proposée(s)</h1>
<p>Pour le bon fonctionnement de votre TANDEM, veuillez n’indiquer 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="user-front-lang1">Langue</label>
<select class="form-select" id="user-front-lang1">
<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" for="user-front-level1">Niveau</label>
<select class="form-select" id="user-front-level1">
<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 2 -->
<div class="row gx-md-5 align-items-center mb-3">
<div class="col-6">
<label class="col-form-label visually-hidden" for="user-front-lang2">Langue 2</label>
<select class="form-select" id="user-front-lang2">
<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="user-front-level2">Niveau 2</label>
<select class="form-select" id="user-front-level2">
<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 3 -->
<div class="row gx-md-5 align-items-center mb-3">
<div class="col-6">
<label class="col-form-label visually-hidden" for="user-front-lang3">Langue 3</label>
<select class="form-select" id="user-front-lang3">
<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="user-front-level3">Niveau 3</label>
<select class="form-select" id="user-front-level3">
<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 4 -->
<div class="row gx-md-5 align-items-center mb-3">
<div class="col-6">
<label class="col-form-label visually-hidden" for="user-front-lang4">Langue 4</label>
<select class="form-select" id="user-front-lang4">
<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="user-front-level4">Niveau 4</label>
<select class="form-select" id="user-front-level4">
<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="user-front-lang5">Langue 5</label>
<select class="form-select" id="user-front-lang5">
<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="user-front-level5">Niveau 5</label>
<select class="form-select" id="user-front-level5">
<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">
<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="user-requested-lang1">Langue</label>
<select class="form-select" id="user-requested-lang1">
<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 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="user-requested-lang2">Langue 2</label>
<select class="form-select" id="user-requested-lang2">
<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="user-requested-lang3">Langue 3</label>
<select class="form-select" id="user-requested-lang3">
<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="user-requested-lang4">Langue 4</label>
<select class="form-select" id="user-requested-lang4">
<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="user-requested-lang5">Langue 5</label>
<select class="form-select" id="user-requested-lang5">
<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>
</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>
<div class="col">
<div>
<img src="static/img/picto_rencontre-sur-place.svg" class="img-fluid">
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="userMeetOptions" id="userMeetOptionReal" value="option1">
<label class="form-check-label" for="userMeetOptionReal">Sur place, en face à face</label>
</div>
</div>
<div class="col">
<div>
<img src="static/img/picto_rencontre-virtuelle.svg" class="img-fluid">
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="userMeetOptions" id="userMeetOptionVirtual" value="option2">
<label class="form-check-label" for="userMeetOptionVirtual">Virtuel (Skype, FaceTime, etc.)</label>
</div>
</div>
<div class="col">
<div>
<img src="static/img/picto_rencontre-sur-place-et-virtuel.svg" class="img-fluid">
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="userMeetOptions" id="userMeetOptionHybrid" value="option3">
<label class="form-check-label" for="userMeetOptionHybrid">Sur place et virtuel</label>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="row gx-md-5 align-items-center">
<div class="col-auto">
<label class="col-form-label" for="user-tandem-meet-town">Lieu de rencontre souhaité</label>
</div>
<div class="col-md-auto">
<select class="form-select" id="user-tandem-meet-town">
<option>Sélectionner une commune</option>
<option>Biel/Bienne</option>
<option>Genève</option>
<option>Lausanne</option>
<option>Bern</option>
<option>Solothurn</option>
</select>
</div>
</div>
</div>
</section>
<button type="button" class="btn btn-cta rounded w-100 py-3" type="submit">Sauvegarder les modifications</button>
</form>
</div>
</section>
</main>
<footer>
<div class="container">
<a href="https://www.bilinguisme.ch/" target="_blank" rel="noopener"><img class="img-fluid" src="static/img/logo/forum-bilinguisme.svg"></a>
<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-5 py-5">
<div class="col mb-3">
<a href="https://www.bilinguisme.ch/" target="_blank" rel="noopener"><img class="img-fluid" src="static/img/logo/forum-bilinguisme.svg" alt="Forum du Bilinguisme"></a>
</div>
<div class="col">
<h5>Forum du bilinguisme</h5>
<p>
Place Robert-Walser 7, CP 439<br>
2501 Biel/Bienne
</p>
<a class="text-link" href="mailto:support@e-tandem.ch">support@e-tandem.ch</a>
<br>
<a class="text-link" href="tel:+41 32 323 22 80">+41 32 323 22 80</a>
</div>
</div>
</div>
</footer>
</body>
</html>