364 lines
22 KiB
HTML
364 lines
22 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<title>e-TANDEM - Recherche de TANDEMs</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>
|
|
<script src="static/js/menu.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" 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="offSideMenu">
|
|
<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 text-bg-secondary 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="menu-separator">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 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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
<main data-screen="search">
|
|
<div class="hero hero-primary container-fluid">
|
|
<div class="d-flex">
|
|
<div class="row">
|
|
<div class="col-lg-6 bottom-anchored order-2 order-lg-1 ">
|
|
<img class="img-fluid" src="static/img/ban-3.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">Rechercher des TANDEMs</h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<section class="container-fluid">
|
|
<div class="row my-5">
|
|
<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 text-bg-secondary 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="menu-separator">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="tandem-list" class="col-lg-8">
|
|
<div class="ui-btn">
|
|
<a data-bs-toggle="collapse" href="#search-filters" role="button" aria-expanded="false" aria-controls="search-filters"><span><img class="icon-ui" src="static/img/icons/filters.svg" alt=""></span>Filtrer</a>
|
|
</div>
|
|
<div id="search-filters" class="collapse">
|
|
<form>
|
|
<!-- Ajax form submit -->
|
|
<div class="row">
|
|
<div class="col-md-auto">
|
|
<div class="align-items-center">
|
|
<label class="col-form-label">Langue(s) proposée(s):</label>
|
|
<select class="form-select" id="user-given-langs">
|
|
<option>--------</option>
|
|
<option>Français</option>
|
|
<option>Deutsch</option>
|
|
<option>Italiano</option>
|
|
<option>Rumantsch</option>
|
|
<option>English</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-auto">
|
|
<div class="align-items-center">
|
|
<label class="col-form-label">Langue(s) recherchée(s):</label>
|
|
<select class="form-select" id="user-searched-langs">
|
|
<option>--------</option>
|
|
<option>Français</option>
|
|
<option>Deutsch</option>
|
|
<option>Italiano</option>
|
|
<option>Rumantsch</option>
|
|
<option>English</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-auto">
|
|
<div class="align-items-center">
|
|
<label class="col-form-label">Lieu de rencontre:</label>
|
|
<select class="form-select" id="user-searched-location-type">
|
|
<option>Indifférent</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-auto">
|
|
<div class="align-items-center">
|
|
<label class="col-form-label">Canton:</label>
|
|
<select class="form-select" id="user-searched-location">
|
|
<option>Indifférent</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-auto">
|
|
<div class="align-items-center">
|
|
<label class="col-form-label">Distance:</label>
|
|
<input type="num" class="form-control" id="user-searched-distance" placeholder="Distance (km)">
|
|
</div>
|
|
</div>
|
|
<div class="col-md-auto">
|
|
<div class="align-items-center">
|
|
<label class="col-form-label">Genre:</label>
|
|
<select class="form-select" id="user-searched-gender">
|
|
<option>Indifférent</option>
|
|
<option>Feminin</option>
|
|
<option>Masculin</option>
|
|
<option>Non-binaire</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div id="search-total-results" class="alert alert-warning mt-3">
|
|
XX profils correspondent à votre recherche
|
|
</div>
|
|
|
|
<div id="tandem-search-results">
|
|
<!-- profile test -->
|
|
<div class="profile">
|
|
<div class="row">
|
|
<div class="col-lg-2">
|
|
<div class="user-avatar">
|
|
<img src="static/img/avatars/default-avatar.svg" alt="Priscilla">
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-9">
|
|
<h4 class="user-pseudo display-6 fw-bold">Priscilla</h4>
|
|
<div class="row">
|
|
|
|
<div class="col-lg-6">
|
|
<div class="user-gender">
|
|
<span class="label">Genre:</span>
|
|
<span>Féminin</span>
|
|
</div>
|
|
<div class="user-meet">
|
|
<span class="label">Mode de rencontre:</span>
|
|
<span>sur place et virtuel</span>
|
|
</div>
|
|
<div class="user-meet-location">
|
|
<span class="label">Lieu de rencontre:</span>
|
|
<span>Bern</span>
|
|
</div>
|
|
<div class="user-last-connexion">
|
|
<span class="label">Dernière connexion:</span>
|
|
<span>21 novembre 2024</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-6 align-self-end">
|
|
<div class="user-given-languages">
|
|
<span class="label">Langue(s) proposée(s):</span>
|
|
<span>Allemand, Suisse-allemand, Anglais</span>
|
|
</div>
|
|
<div class="user-searched-languages">
|
|
<span class="label">Langue(s) recherchée(s):</span>
|
|
<span>Français</span>
|
|
</div>
|
|
<div class="user-main-language1">
|
|
<span class="label">Langue maternelle 1:</span>
|
|
<span>Allemand</span>
|
|
</div>
|
|
<div class="user-main-language2">
|
|
<span class="label">Langue maternelle 2:</span>
|
|
<span>Suisse-allemand</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="user-description">
|
|
Ich möchte gerne meine Französischkenntnisse verbessern. In meiner Freizeit male bzw. illustriere ich, lese, mache Yoga oder verbringe Zeit in der Natur. Ich komme aus Thun, arbeite aber in Bern. Gerne unterstütze ich dich dabei, deine Deutschkenntnisse zu verbessern.
|
|
</div>
|
|
</div>
|
|
<div class="profile-options">
|
|
<button type="button" class="btn btn-cta rounded">Proposer un TANDEM</button>
|
|
<button type="button" class="btn btn-link">Signaler ce profil inapproprié</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- profile test -->
|
|
<div class="profile">
|
|
<div class="row">
|
|
<div class="col-lg-2">
|
|
<div class="user-avatar">
|
|
<img src="static/img/avatars/55238.jpg" alt="Petra Horvat-Puzak">
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-9">
|
|
<h4 class="user-pseudo display-6 fw-bold">Petra Horvat-Puzak</h4>
|
|
<div class="row">
|
|
|
|
<div class="col-lg-6">
|
|
<div class="user-gender">
|
|
<span class="label">Genre:</span>
|
|
<span>Féminin</span>
|
|
</div>
|
|
<div class="user-meet">
|
|
<span class="label">Mode de rencontre:</span>
|
|
<span>sur place, en face à face</span>
|
|
</div>
|
|
<div class="user-meet-location">
|
|
<span class="label">Lieu de rencontre:</span>
|
|
<span>Bern</span>
|
|
</div>
|
|
<div class="user-last-connexion">
|
|
<span class="label">Dernière connexion:</span>
|
|
<span>25 novembre 2024</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-6 align-self-end">
|
|
<div class="user-given-languages">
|
|
<span class="label">Langue(s) proposée(s):</span>
|
|
<span>Allemand, Croate</span>
|
|
</div>
|
|
<div class="user-searched-languages">
|
|
<span class="label">Langue(s) recherchée(s):</span>
|
|
<span>Français</span>
|
|
</div>
|
|
<div class="user-main-language1">
|
|
<span class="label">Langue maternelle 1:</span>
|
|
<span>Allemand</span>
|
|
</div>
|
|
<div class="user-main-language2">
|
|
<span class="label">Langue maternelle 2:</span>
|
|
<span>Croate</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="user-description">
|
|
Ich möchte meine Französischkenntnisse v.A. mündlich verbessern um im Berufsalltag ungehemmter und einfacher kommunizieren zu können. Ist eingerostet, da ich es sehr wenig brauchte. Bin 39jährig, mag die Natur und Musik, habe 2 Töchter. Am liebsten möchte ich mich in Persona treffen, aber wir können auch mit online abwechseln. Kann zu Bürozeiten oder Do/Fr nach Feierabend.
|
|
</div>
|
|
</div>
|
|
<div class="profile-options">
|
|
<button type="button" class="btn btn-cta rounded">Proposer un TANDEM</button>
|
|
<button type="button" class="btn btn-link">Signaler ce profil inapproprié</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</section>
|
|
</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>
|
|
</footer>
|
|
</body>
|
|
</html>
|