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

24
404.html
View file

@ -11,7 +11,7 @@
<script src="static/js/vendor/bootstrap.bundle.min.js"></script> <script src="static/js/vendor/bootstrap.bundle.min.js"></script>
</head> </head>
<body data-platform="public"> <body data-platform="public" data-screen="404">
<header class="top-bar fixed-top"> <header class="top-bar fixed-top">
<div class="d-grid gap-3 align-items-center"> <div class="d-grid gap-3 align-items-center">
<nav class="navbar navbar-expand-lg bg-body-tertiary" aria-label="Main navigation"> <nav class="navbar navbar-expand-lg bg-body-tertiary" aria-label="Main navigation">
@ -43,7 +43,7 @@
</div> </div>
</header> </header>
<main class="container" data-screen="404"> <main class="container">
<div class="wrapper container"> <div class="wrapper container">
<div class="text-center"> <div class="text-center">
<h1 class="display-1 fw-bold">404</h1> <h1 class="display-1 fw-bold">404</h1>
@ -58,9 +58,25 @@
</main> </main>
<footer> <footer>
<div class="container-fluid"> <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> </div>
</footer> </footer>
</body> </body>

24
connect.html
View file

@ -11,7 +11,7 @@
<script src="static/js/vendor/bootstrap.bundle.min.js"></script> <script src="static/js/vendor/bootstrap.bundle.min.js"></script>
</head> </head>
<body data-platform="public"> <body data-platform="public" data-screen="connect">
<header class="top-bar fixed-top"> <header class="top-bar fixed-top">
<div class="d-grid gap-3 align-items-center"> <div class="d-grid gap-3 align-items-center">
<nav class="navbar navbar-expand-lg bg-body-tertiary" aria-label="Main navigation"> <nav class="navbar navbar-expand-lg bg-body-tertiary" aria-label="Main navigation">
@ -43,7 +43,7 @@
</div> </div>
</header> </header>
<main class="container" data-screen="connect"> <main class="container">
<div class="wrapper container"> <div class="wrapper container">
<div class="col-11 col-lg-5 mx-auto"> <div class="col-11 col-lg-5 mx-auto">
<form class="form-sign mb-3"> <form class="form-sign mb-3">
@ -69,9 +69,25 @@
</main> </main>
<footer> <footer>
<div class="container-fluid"> <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> </div>
</footer> </footer>
</body> </body>

24
create-account.html
View file

@ -12,7 +12,7 @@
<script src="static/js/check.js"></script> <script src="static/js/check.js"></script>
</head> </head>
<body data-platform="public"> <body data-platform="public" data-screen="create-account">
<header class="top-bar fixed-top"> <header class="top-bar fixed-top">
<div class="d-grid gap-3 align-items-center"> <div class="d-grid gap-3 align-items-center">
<nav class="navbar navbar-expand-lg bg-body-tertiary" aria-label="Main navigation"> <nav class="navbar navbar-expand-lg bg-body-tertiary" aria-label="Main navigation">
@ -44,7 +44,7 @@
</div> </div>
</header> </header>
<main class="container-fluid" data-screen="connect"> <main class="container-fluid">
<div class="wrapper container"> <div class="wrapper container">
<div class="col-11 col-lg-5 mx-auto"> <div class="col-11 col-lg-5 mx-auto">
<form class="form-sign mb-3"> <form class="form-sign mb-3">
@ -66,8 +66,24 @@
<footer> <footer>
<div class="container"> <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> </div>
</footer> </footer>
<!-- Modal --> <!-- Modal -->
@ -92,7 +108,5 @@
</div> </div>
</div> </div>
</div> </div>
</body> </body>
</html> </html>

34
home.html
View file

@ -11,7 +11,7 @@
<script src="static/js/vendor/bootstrap.bundle.min.js"></script> <script src="static/js/vendor/bootstrap.bundle.min.js"></script>
</head> </head>
<body> <body data-screen="homepage">
<header class="top-bar fixed-top"> <header class="top-bar fixed-top">
<div class="d-grid gap-3 align-items-center"> <div class="d-grid gap-3 align-items-center">
<nav class="navbar navbar-expand-lg bg-body-tertiary" aria-label="Main navigation"> <nav class="navbar navbar-expand-lg bg-body-tertiary" aria-label="Main navigation">
@ -30,7 +30,7 @@
<ul class="navbar-nav"> <ul class="navbar-nav">
</ul> </ul>
<div class="d-flex align-items-center gap-2 ms-auto"> <div id="side-lang" class="ms-auto">
<div class="col"> <div class="col">
<label for="lang">Choisir la langue</label> <label for="lang">Choisir la langue</label>
<select id="lang" class="lang-select form-select form-select-sm" aria-label="Select language"> <select id="lang" class="lang-select form-select form-select-sm" aria-label="Select language">
@ -41,7 +41,6 @@
<option>English</option> <option>English</option>
</select> </select>
</div> </div>
<!-- <a class="btn btn-sm btn-cta rounded col-auto" href="connect.html">Se connecter</a> -->
</div> </div>
</div> </div>
@ -49,6 +48,7 @@
</div> </div>
</nav> </nav>
</div> </div>
</header> </header>
@ -56,16 +56,16 @@
<div class="hero hero-primary container-fluid"> <div class="hero hero-primary container-fluid">
<div> <div>
<div class="row"> <div class="row">
<div class="col-lg-4 bottom-anchored order-2 order-lg-1 "> <div class="col-md-8 col-lg-6 col-xxl-4 bottom-anchored order-2 order-lg-1 ">
<img class="img-fluid" src="static/img/public-ban-home.png"> <img class="img-fluid" src="static/img/public-ban-home.png">
</div> </div>
<div class="col-lg-4 order-1 order-lg-2"> <div class="col-lg-6 col-xxl-4 order-1 order-lg-2">
<h1 class="display-5 fw-bold lh-1 mb-3 mb-lg-5">L’autre manière d’approfondir ses connaissances linguistiques</h1> <h1 class="display-5 fw-bold lh-1 mb-3 mb-lg-5">L’autre manière d’approfondir ses connaissances linguistiques</h1>
<p>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>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>Deux personnes de langues différentes forment un TANDEM et s’enseignent réciproquement leur langue. Les deux sont donc à la fois apprenant·e·s et enseignant·e·s.</p> <p>Deux personnes de langues différentes forment un TANDEM et s’enseignent réciproquement leur langue. Les deux sont donc à la fois apprenant·e·s et enseignant·e·s.</p>
<div class="d-grid gap-2 d-md-flex justify-content-md-start"> <div class="btn-stack">
<a href="connect.html"><button type="button" class="btn btn-primary btn-hero-primary btn-lg rounded px-4 me-md-2">Se connecter</button></a> <a class="btn btn-primary btn-hero-primary btn-lg rounded" href="connect.html">Se connecter</a>
<a href="create-account.html"><button type="button" class="btn btn-outline-secondary btn-lg rounded px-4">Créer un compte</button></a> <a class="btn btn-outline-secondary btn-lg rounded" href="create-account.html">Créer un compte</a>
</div> </div>
</div> </div>
</div> </div>
@ -185,8 +185,24 @@
<footer> <footer>
<div class="container"> <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> </div>
</footer> </footer>
</body> </body>
</html> </html>

12
index.html
View file

@ -15,12 +15,12 @@
<h1>Forum du bilinguisme HTML/CSS maquettes</h1> <h1>Forum du bilinguisme HTML/CSS maquettes</h1>
<ul> <ul>
<li><a href="home.html">Page d'accueil</a></li> <li><a href="home.html" target="_blank" rel="noopener">Page d'accueil</a></li>
<li><a href="connect.html">Page de connexion</a></li> <li><a href="connect.html" target="_blank" rel="noopener">Page de connexion</a></li>
<li><a href="create-account.html">Création de compte</a></li> <li><a href="create-account.html" target="_blank" rel="noopener">Création de compte</a></li>
<li><a href="profile.html">Profil utilisateur</a></li> <li><a href="profile.html" target="_blank" rel="noopener">Profil utilisateur</a></li>
<li><a href="tandem-list.html">Recherche TANDEM</a></li> <li><a href="tandem-list.html" target="_blank" rel="noopener">Recherche TANDEM</a></li>
<li><a href="404.html">Error 404</a></li> <li><a href="404.html" target="_blank" rel="noopener">Error 404</a></li>
</ul> </ul>
</body> </body>
</html> </html>

819
profile.html
View file

@ -12,7 +12,7 @@
<script src="static/js/js.js"></script> <script src="static/js/js.js"></script>
</head> </head>
<body> <body data-screen="profile">
<header class="top-bar fixed-top"> <header class="top-bar fixed-top">
<div class="d-grid gap-3 align-items-center"> <div class="d-grid gap-3 align-items-center">
<nav class="navbar navbar-expand-lg bg-body-tertiary" aria-label="Main navigation"> <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"> <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> <span class="custom-toggler navbar-toggler-icon"></span>
</button> </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"> <!-- <div class="offcanvas-header">
<button type="button" type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close main menu"></button> <button type="button" type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close main menu"></button>
</div> --> </div> -->
<div class="offcanvas-body"> <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> </a>
<div class="d-flex align-items-center gap-2 ms-auto"> </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"> <div class="col">
<label for="lang">Choisir la langue</label> <label for="lang">Choisir la langue</label>
<select id="lang" class="lang-select form-select form-select-sm" aria-label="Select language"> <select id="lang" class="lang-select form-select form-select-sm" aria-label="Select language">
@ -42,370 +134,433 @@
<option>English</option> <option>English</option>
</select> </select>
</div> </div>
<!-- <a class="btn btn-sm btn-cta rounded col-auto" href="connect.html">Se connecter</a> -->
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</nav> </nav>
</div> </div>
</header> </header>
<main data-screen="profile"> <main>
<div class="hero hero-secondary container-fluid"> <div class="hero hero-secondary container-fluid">
<div> <div>
<div class="container"> <div class="row">
<div class="col-lg-8"> <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> <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>
</div> </div>
</div> </div>
<section id="profile" class="container my-5">
<form> <section class="container-fluid">
<section class="panel mb-3"> <div class="row my-3">
<h1 class="fs-2 mb-4">Informations générales</h1> <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> <form>
<div class="row g-3 align-items-center justify-content-between mb-3"> <section class="panel mb-3">
<div class="col-auto"> <h1 class="fs-2 mb-4">Informations générales</h1>
<div class="user-avatar"> <form>
<img src="static/img/avatars/default-avatar.svg" class="img-fluid"> <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>
<button type="button" class="btn btn-cta">Télécharger une image</button> <div class="row g-3 align-items-center mb-3">
</div> <div class="col-auto">
<div id="user-profile-activation" class="col-auto rounded"> <label class="col-form-label">Pseudo</label>
<div class="form-check form-switch form-check-reverse"> </div>
<input class="form-check-input" type="checkbox" role="switch" id="activate-user-profile"> <div class="col-auto">
<label class="form-check-label" for="activate-user-profile">Rendre mon profil public</label> <input class="form-control" type="text" id="user-pseudo" placeholder="Forum du Bilinguisme" 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" 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>
</div> <!-- lang 2 -->
<div class="row g-3 align-items-center mb-3"> <div class="row gx-md-5 align-items-center mb-3">
<div class="col-auto"> <div class="col-6">
<label class="col-form-label">Pseudo</label> <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>
<div class="col-auto"> <!-- lang 3 -->
<input class="form-control" type="text" id="user-pseudo" placeholder="Hot's Design" disabled readonly> <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> <!-- lang 4 -->
<div class="row align-items-center mb-3"> <div class="row gx-md-5 align-items-center mb-3">
<div class="col-auto"> <div class="col-6">
<label class="col-form-label">Email</label> <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>
<div class="col-md-5"> <!-- lang 5 -->
<input class="form-control" type="email" id="user-mail" placeholder="forum@zweisprachigkeit.ch" disabled readonly> <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> </section>
<div class="row align-items-center mb-3"> <section class="panel mb-3">
<div class="col-auto"> <h1 class="fs-2 mb-4">Langue(s) recherchée(s)</h1>
<label class="col-form-label">Genre</label> <!-- 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>
<div class="col-md-5"> <!-- lang 2 -->
<select class="form-select" id="user-gender"> <div class="row gx-md-5 align-items-center mb-3">
<option>Homme</option> <div class="col-md-6">
<option>Femme</option> <label class="col-form-label visually-hidden" for="user-requested-lang2">Langue 2</label>
<option>Non-binaire</option> <select class="form-select" id="user-requested-lang2">
</select> <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> <!-- lang 3 -->
<div class="row align-items-center mb-3"> <div class="row gx-md-5 align-items-center mb-3">
<div class="col-auto"> <div class="col-md-6">
<label class="col-form-label">Langue</label> <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>
<div class="col-md-5"> <!-- lang 4 -->
<select class="form-select" id="user-lang1"> <div class="row gx-md-5 align-items-center mb-3">
<option>Français</option> <div class="col-md-6">
<option>Deutsch</option> <label class="col-form-label visually-hidden" for="user-requested-lang4">Langue 4</label>
<option>Italiano</option> <select class="form-select" id="user-requested-lang4">
<option>Rumantsch</option> <option>Sélectionner une langue</option>
<option>English</option> <option>Français</option>
</select> <option>Deutsch</option>
<option>Italiano</option>
<option>Rumantsch</option>
<option>English</option>
</select>
</div>
</div> </div>
</div> <!-- lang 5 -->
<div class="row align-items-center"> <div class="row gx-md-5 align-items-center">
<div class="col-auto"> <div class="col-md-6">
<label class="col-form-label">Langue</label> <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>
<div class="col-md-5"> </section>
<select class="form-select" id="user-lang2"> <section id="tandem-meet" class="panel mb-3">
<option>Français</option> <h1 class="fs-2 mb-4">TANDEMs</h1>
<option>Deutsch</option> <div class="row mb-3">
<option>Italiano</option> <label class="form-label">Mode de rencontre souhaité</label>
<option>Rumantsch</option> <div class="col">
<option>English</option> <div>
</select> <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>
</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> </form>
</section> </section>
<section class="panel mb-3"> </div>
<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>
</section> </section>
</main> </main>
<footer> <footer>
<div class="container"> <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> </div>
</footer> </footer>
</body> </body>
</html> </html>

34
static/css/main.css
View file

@ -32,6 +32,7 @@ body {
overflow-x: hidden; overflow-x: hidden;
letter-spacing: .125px; letter-spacing: .125px;
font-variant-ligatures: no-common-ligatures; font-variant-ligatures: no-common-ligatures;
margin: 0;
} }
h1, h2, h3, h4, h5{ h1, h2, h3, h4, h5{
font-family: var(--bs-ttl-font-family); font-family: var(--bs-ttl-font-family);
@ -82,16 +83,21 @@ h1, h2, h3, h4, h5{
.wrapper { .wrapper {
display: flex; display: flex;
align-items: center; align-items: center;
height: auto;
min-height: calc(100vh - var(--top-bar))
}
/* [data-platform="public"] > [data-screen="connect"]{
background-color: var(--accent-normal);
} */
[data-screen="404"] .container{
justify-content: center; justify-content: center;
height: auto;
min-height: calc(100vh - var(--top-bar));
margin-top: var(--top-bar);
} }
[data-screen="search"] .container-fluid > .row{ /* Screens */
/* [data-screen="error404"], [data-screen="connect"]{
display: flex;
flex-direction: column;
min-height: 100vh;
}
[data-screen="error404"] main, [data-screen="connect"] main{
margin: auto 0;
} */
[data-screen="search"] .container-fluid > .row, [data-screen="profile"] .container-fluid > .row{
justify-content: center; justify-content: center;
} }
@ -199,7 +205,6 @@ h1, h2, h3, h4, h5{
font-weight: initial; font-weight: initial;
} }
#tandem-explanations{ #tandem-explanations{
box-shadow: 0 20px 10px -20px rgba(0,0,0,0.45) inset;
padding-top: 5rem; padding-top: 5rem;
padding-bottom: 5rem; padding-bottom: 5rem;
background-color: var(--background-wrapper); background-color: var(--background-wrapper);
@ -307,12 +312,10 @@ article li:not(:first-of-type){
padding: 0.5em 1.5em; padding: 0.5em 1.5em;
border: none; border: none;
} }
.btn-hero-secondary{ .btn-hero-secondary{
border-color: var(--primary); border-color: var(--primary);
color: var(--primary); color: var(--primary);
} }
.btn-cta{ .btn-cta{
background-color: var(--primary); background-color: var(--primary);
color: white; color: white;
@ -326,6 +329,11 @@ article li:not(:first-of-type){
color: var(--bs-gray-600); color: var(--bs-gray-600);
border-color: var(--bs-gray-500); border-color: var(--bs-gray-500);
} }
.btn-stack{
display: flex;
justify-content: flex-start;
gap: 1rem;
}
/* forms */ /* forms */
.lang-select{ .lang-select{
max-width: 12em; max-width: 12em;
@ -426,9 +434,6 @@ nav .icon-ui{
} }
/* media queries */ /* media queries */
@media (width <= 576px) { @media (width <= 576px) {
body{
font-size: 1.0625rem;
}
:root{ :root{
--div-padding: 2em; --div-padding: 2em;
--bottom-bar: 40px; --bottom-bar: 40px;
@ -536,7 +541,6 @@ nav .icon-ui{
} }
@media (576px <= width <= 992px) { @media (576px <= width <= 992px) {
.btn-stack{ .btn-stack{
display: flex;
justify-content: center; justify-content: center;
} }
.partners-logo-grid{ .partners-logo-grid{

BIN
static/img/ban-4.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 452 KiB

6
tandem-list.html
View file

@ -12,7 +12,7 @@
<script src="static/js/js.js"></script> <script src="static/js/js.js"></script>
</head> </head>
<body> <body data-screen="search">
<header class="top-bar fixed-top"> <header class="top-bar fixed-top">
<div class="d-grid gap-3 align-items-center"> <div class="d-grid gap-3 align-items-center">
<nav class="navbar navbar-expand-lg bg-body-tertiary" aria-label="Main navigation"> <nav class="navbar navbar-expand-lg bg-body-tertiary" aria-label="Main navigation">
@ -142,8 +142,8 @@
</div> </div>
</header> </header>
<main data-screen="search"> <main>
<div class="hero hero-primary container-fluid"> <div class="hero hero-secondary container-fluid">
<div> <div>
<div class="row"> <div class="row">
<div class="col-lg-6 bottom-anchored order-2 order-lg-1 "> <div class="col-lg-6 bottom-anchored order-2 order-lg-1 ">