615 lines
46 KiB
HTML
615 lines
46 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="fr">
|
||
<head>
|
||
<title>e-TANDEM · Profile</title>
|
||
<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">
|
||
<link href="static/css/bootstrap.min.css" rel="stylesheet">
|
||
<link href="static/css/main.css" rel="stylesheet">
|
||
<script src="static/js/vendor/bootstrap.bundle.min.js"></script>
|
||
<script src="static/js/js.js"></script>
|
||
</head>
|
||
|
||
<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">
|
||
<div class="container">
|
||
<a class="navbar-brand" href="home.html">
|
||
<img src="static/img/logo/logo_e-tandem_fr.svg">
|
||
</a>
|
||
<button type="button" id="menu-toggle" class="navbar-toggler border-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#main-nav" aria-controls="main-nav" aria-label="Toggle main menu">
|
||
<span class="custom-toggler navbar-toggler-icon"></span>
|
||
</button>
|
||
<div class="offcanvas offcanvas-end" tabindex="-1" id="main-nav" 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">
|
||
<nav class="side-menu" id="offside-menu">
|
||
<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="tandem-list.html" role="menuitem" class="nav-link">
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="icon-ui" fill="none" class="icon-ui" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
|
||
<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
|
||
|
||
</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="invitations.html" role="menuitem" class="nav-link">
|
||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon-ui" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" d="m7.875 14.25 1.214 1.942a2.25 2.25 0 0 0 1.908 1.058h2.006c.776 0 1.497-.4 1.908-1.058l1.214-1.942M2.41 9h4.636a2.25 2.25 0 0 1 1.872 1.002l.164.246a2.25 2.25 0 0 0 1.872 1.002h2.092a2.25 2.25 0 0 0 1.872-1.002l.164-.246A2.25 2.25 0 0 1 16.954 9h4.636M2.41 9a2.25 2.25 0 0 0-.16.832V12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 12V9.832c0-.287-.055-.57-.16-.832M2.41 9a2.25 2.25 0 0 1 .382-.632l3.285-3.832a2.25 2.25 0 0 1 1.708-.786h8.43c.657 0 1.281.287 1.709.786l3.284 3.832c.163.19.291.404.382.632M4.5 20.25h15A2.25 2.25 0 0 0 21.75 18v-2.625c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125V18a2.25 2.25 0 0 0 2.25 2.25Z" />
|
||
</svg>
|
||
Gestion des demandes<span class="badge rounded-pill ms-2">101</span>
|
||
</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">
|
||
<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>
|
||
<!-- 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">
|
||
<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>
|
||
|
||
<!-- if user is Admin -->
|
||
<div class="separator menu-admin">
|
||
<a class="btn-link" data-bs-toggle="collapse" href="#side-menu-admin" role="button" aria-expanded="false" aria-controls="side-menu-admin">Administration</a>
|
||
</div>
|
||
<div id="side-menu-admin" 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>
|
||
<!-- endif -->
|
||
|
||
</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">
|
||
<option selected>Français</option>
|
||
<option>Deutsch</option>
|
||
<option>Italiano</option>
|
||
<option>Rumantsch</option>
|
||
<option>English</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
|
||
<main>
|
||
<div class="hero hero-secondary container-fluid">
|
||
<div>
|
||
<div class="row">
|
||
<div class="col-lg-auto 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">Mon profil</h1>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<section class="container-fluid">
|
||
<div class="row my-3">
|
||
<div id="second-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">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 active" aria-current="page">Mon profil</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a href="invitations.html" role="menuitem" class="nav-link">Demandes <span class="badge rounded-pill">101</span></a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a href="#" role="menuitem" class="nav-link">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">
|
||
<div class="alert alert-danger" role="alert">Eventuels messages d'alerte (erreurs de validation formulaire)</div>
|
||
<form>
|
||
<section class="panel">
|
||
<h1 class="fs-2 mb-4">Informations générales</h1>
|
||
<form>
|
||
<div class="row gap-3 align-items-center">
|
||
<div class="col-md-6">
|
||
<div id="avatar-container" class="row">
|
||
<div class="col-md-auto">
|
||
<div class="user-avatar">
|
||
<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 id="user-visibility" class="col-md-5">
|
||
<div id="user-profile-activation" 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="user-visibility-extend" class="rounded mt-2">
|
||
<div class="form-check form-switch">
|
||
<input class="form-check-input" type="checkbox" role="switch" id="activateuser-visibility">
|
||
<label class="form-check-label" for="activateuser-visibility">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 id="user-profile-infos">
|
||
<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="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="user-gender" 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 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 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="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 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 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>
|
||
<button class="btn btn-cta" data-bs-toggle="modal" data-bs-target="#info-modal">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>
|
||
|
||
<!-- 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>Français</option>
|
||
<option>Deutsch</option>
|
||
<option>Italiano</option>
|
||
<option>Rumantsch</option>
|
||
<option>English</option>
|
||
</select>
|
||
</div>
|
||
<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>
|
||
<!-- 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>
|
||
<option>Italiano</option>
|
||
<option>Rumantsch</option>
|
||
<option>English</option>
|
||
</select>
|
||
</div>
|
||
<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>
|
||
</section>
|
||
|
||
<section class="panel mt-3">
|
||
<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 -->
|
||
<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>
|
||
<option>Italiano</option>
|
||
<option>Rumantsch</option>
|
||
<option>English</option>
|
||
</select>
|
||
</div>
|
||
<!-- 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>
|
||
<option>Italiano</option>
|
||
<option>Rumantsch</option>
|
||
<option>English</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<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">
|
||
</div>
|
||
<div class="form-check form-check-inline">
|
||
<input class="form-check-input" type="radio" name="userMeetOptions" id="user-meetoption-real" value="option1">
|
||
<label class="form-check-label" for="user-meetoption-real">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="user-meetoption-virtual" value="option2">
|
||
<label class="form-check-label" for="user-meetoption-virtual">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="user-meetoption-hybrid" value="option3">
|
||
<label class="form-check-label" for="user-meetoption-hybrid">Sur place et virtuel</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="user-tandemmeet-location" 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="usertandem-meetTown">Lieu de rencontre souhaité</label>
|
||
</div>
|
||
<div class="col-md-auto">
|
||
<select class="form-select" id="usertandem-meetTown">
|
||
<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 my-4" type="submit">Sauvegarder les modifications</button>
|
||
</form>
|
||
</section>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<footer>
|
||
<div class="container">
|
||
<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>
|
||
|
||
<div class="modal fade" id="info-modal" tabindex="-1" aria-label="Déterminer son niveau de langue" aria-hidden="true">
|
||
<div class="modal-dialog modal-dialog-centered">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h5 class="modal-title">Déterminer votre niveau de langue</h5>
|
||
</div>
|
||
<div class="modal-body">
|
||
<ul id="lang-level-list">
|
||
<li>
|
||
<h6>Niveau A1 : Élémentaire</h6>
|
||
<p>Vous pouvez comprendre la langue dans des situations quotidiennes élémentaires si votre interlocuteur parle doucement et clairement. Vous comprenez et utilisez des expressions simples.</p>
|
||
</li>
|
||
<li>
|
||
<h6>Niveau A2 : Pré-intermédiaire</h6>
|
||
<p>Vous pouvez communiquer et vous faire comprendre avec des messages simples dans certains contextes quotidiens.</p>
|
||
</li>
|
||
<li>
|
||
<h6>Niveau B2 : Intermédiaire supérieur</h6>
|
||
<p>Vous pouvez utiliser la langue de manière efficace et vous exprimer précisément. Développez votre aisance à l’oral en discutant, débattant et exprimant votre opinion de manière plus approfondie.</p>
|
||
</li>
|
||
<li>
|
||
<h6>Niveau C1 : Avancé</h6>
|
||
<p>Vous pouvez parler la langue de manière plus complexe, spontanée et sur des sujets variés.</p>
|
||
</li>
|
||
<li>
|
||
<h6>Niveau C2 : Courant</h6>
|
||
<p>Vous pouvez utiliser la langue avec aisance et facilité en argumentant sur des sujets complexes.</p>
|
||
</li>
|
||
</ul>
|
||
|
||
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|