410 lines
23 KiB
HTML
410 lines
23 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="fr">
|
||
<head>
|
||
<title>e-TANDEM - Profil</title>
|
||
<meta charset="UTF-8">
|
||
<meta name="robots" content="noindex">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<link href="static/css/bootstrap.min.css" rel="stylesheet">
|
||
<link href="static/css/main.css" rel="stylesheet">
|
||
<link rel="icon" type="image/png" sizes="16x16" href="static/favicon.png">
|
||
<script src="static/js/vendor/bootstrap.bundle.min.js"></script>
|
||
</head>
|
||
|
||
<body>
|
||
<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-Bilinguisme_FR.svg">
|
||
</a>
|
||
<button type="button" id="menu-toggle" class="navbar-toggler border-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#mainNav" aria-controls="mainNav" aria-label="Toggle main menu">
|
||
<span class="navbar-toggler-icon"></span>
|
||
</button>
|
||
<div class="offcanvas offcanvas-end" tabindex="-1" id="mainNav" aria-label="Main menu">
|
||
<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">
|
||
|
||
</ul>
|
||
<div class="d-flex align-items-center gap-2 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>
|
||
<!-- <a class="btn btn-sm btn-cta rounded col-auto" href="connect.html">Se connecter</a> -->
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
|
||
<main data-screen="profile">
|
||
<div class="hero hero-secondary container-fluid">
|
||
<div class="d-flex">
|
||
<div class="container">
|
||
<div class="col-lg-8">
|
||
<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>
|
||
</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>
|
||
<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="Hot's Design" disabled readonly>
|
||
</div>
|
||
</div>
|
||
<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">Présentation (500 caractères max.)</label>
|
||
<textarea name="user-description" id="user-description" class="form-control" placeholder="Entrez votre présentation" rows="4"></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>
|
||
</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>
|
||
</footer>
|
||
</body>
|
||
</html>
|