e-tandem_UI/tandem-list.html
2024-11-25 16:49:48 +01:00

364 lines
20 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>
</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 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" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close main menu"></button>
</div>
<div class="offcanvas-body">
<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>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 class="d-flex">
<div class="container">
<div class="col-lg-8">
<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">
<div id="secondary-nav" class="col-md-3 my-5">
<nav class="side-menu">
<ul class="nav flex-column mb-auto">
<li class="nav-item">
<a href="#" class="nav-link active" aria-current="page">
Rechercher des TANDEMs
</a>
</li>
<li>
<a href="#" class="nav-link">
Mes TANDEMs
</a>
</li>
<li>
<a href="profile.html" class="nav-link">
Modifier mon profil
</a>
</li>
<li>
<a href="#" class="nav-link">
Demandes reçues <span class="badge text-bg-secondary rounded-pill">101</span>
</a>
</li>
<li>
<a href="#" class="nav-link">
Demandes envoyées
</a>
</li>
<li>
<a href="#" class="nav-link">
Statistiques
</a>
</li>
<li>
<a href="#" class="nav-link">
Espace documentaire
</a>
</li>
</ul>
</nav>
<!-- <nav>
<li class="group">
<a href="#">
Admin
</a>
</li>
<li class="sub tandemaccount-index" style="display: none;">
<a href="/TandemAccount">
Comptes
</a>
</li>
<li class="sub signalement-index" style="display: none;">
<a href="/Signalement">
Signalements
</a>
</li>
<li role="separator" class="divider sub" style="display: none;"></li>
<li class="sub tandemlanguage-index" style="display: none;">
<a href="/TandemLanguage">
Langues
</a>
</li>
<li class="sub tandemlanguagelevel-index" style="display: none;">
<a href="/TandemLanguageLevel">
Niveaux
</a>
</li>
<li class="sub news-index" style="display: none;">
<a href="/News">
Actualités
</a>
</li>
<li class="sub commune-index" style="display: none;">
<a href="/Commune">
Lieu
</a>
</li>
<li class="sub dictionary" style="display: none;">
<a href="/Dictionary">
Dictionnaire
</a>
</li>
<li class="sub tandem-email" style="display: none;">
<a href="/Tandem/Email">
Emails
</a>
</li>
</ul>
</nav> -->
</div>
<section id="tandem-list" class="col-md-9 my-5">
<form id="search-filters">
<!-- Ajax form submit -->
<div class="row">
<div class="col-md-auto">
<div class="align-items-center mb-3">
<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 mb-3">
<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 mb-3">
<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 mb-3">
<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 mb-3">
<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 mb-3">
<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 id="tandem-search-results">
<!-- profile test -->
<div id="search-total-results" class="alert alert-warning mt-3">
XX profils correspondent à vos critères de recherche
</div>
<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 class="btn btn-cta rounded">Proposer un TANDEM</button>
<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 class="btn btn-cta rounded">Proposer un TANDEM</button>
<button class="btn btn-link">Signaler ce profil inapproprié</button>
</div>
</div>
</div>
</div>
</section>
</div>
</section>
</main>
<footer>
</footer>
</body>
</html>