eric/e-tandem_UI
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Compare commits

base: eric:0d4a2c75ab12711fdd74f49f3f7fe96ee47e0dd8
Branches Tags
eric:main
..
compare: eric:0c36ecccfabb0c96c7e9615d3f0ed94009e60c42
Branches Tags
eric:main

No commits in common. "0d4a2c75ab12711fdd74f49f3f7fe96ee47e0dd8" and "0c36ecccfabb0c96c7e9615d3f0ed94009e60c42" have entirely different histories.
0d4a2c75ab ... 0c36ecccfa

10 changed files with 78 additions and 12375 deletions
Download patch file Download diff file Expand all files Collapse all files

35
404.html
View file

@ -12,37 +12,28 @@
</head>
<body data-platform="public">
<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">
<header class="top-bar" data-image="">
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<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="custom-toggler navbar-toggler-icon"></span>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav" aria-controls="mainNav" aria-expanded="false" aria-label="Toggle navigation">
<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-body">
<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 class="collapse navbar-collapse" id="mainNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Accueil</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</header>
<main class="container" data-screen="404">
<div class="wrapper container">
<div class="text-center">

35
connect.html
View file

@ -12,37 +12,28 @@
</head>
<body data-platform="public">
<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">
<header class="top-bar" data-image="">
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<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="custom-toggler navbar-toggler-icon"></span>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav" aria-controls="mainNav" aria-expanded="false" aria-label="Toggle navigation">
<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-body">
<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 class="collapse navbar-collapse" id="mainNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Accueil</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</header>
<main class="container" data-screen="connect">
<div class="wrapper container">
<div class="col-11 col-lg-5 mx-auto">

46
create-account.html
View file

@ -9,41 +9,31 @@
<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/check.js"></script>
</head>
<body data-platform="public">
<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">
<header class="top-bar" data-image="">
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<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="custom-toggler navbar-toggler-icon"></span>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav" aria-controls="mainNav" aria-expanded="false" aria-label="Toggle navigation">
<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-body">
<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 class="collapse navbar-collapse" id="mainNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Accueil</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</header>
<main class="container-fluid" data-screen="connect">
<div class="wrapper container">
<div class="col-11 col-lg-5 mx-auto">
@ -54,9 +44,9 @@
<label class="form-label" for="userId">Adresse électronique</label>
</div>
<div class="mb-3">
<button id="readTerms" type="button" class="btn btn-link" data-bs-toggle="modal" data-bs-target="#cgv-modal">Lire les termes et conditions d'utilisation</button>
<button type="button" class="btn btn-link" data-bs-toggle="modal" data-bs-target="#cgv-modal">Lire les termes et conditions d'utilisation</button>
</div>
<button id="btnCreateAccount" class="btn btn-cta rounded w-100 py-3" type="submit" disabled>Créer un compte</button>
<button class="btn btn-cta rounded w-100 py-3" type="submit">Créer un compte</button>
</form>
<span>J'ai déjà un compte?</span>
<a href="connect.html">M'identifier</a>
@ -78,10 +68,8 @@
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
</div>
<div class="modal-body">
<p>En vous inscrivant sur plateforme e-tandem.ch des TANDEMs linguistiques® du Forum du bilinguisme, vous acceptez de publier votre profil<sup class="emphasis"><strong>*</strong></sup>.</p>
<p>Le Forum du bilinguisme souhaite rappeler que cette plateforme est uniquement réservée à la mise en relation de personnes intéressées à pratiquer un TANDEM linguistique®.</p>
<p>Le Forum du bilinguisme se réserve le droit de supprimer en tout temps le profil de personnes dont les intentions diffèrent de l’objectif premier de cette plateforme : mettre en contact des personnes de langues différentes dans le but de former et pratiquer un TANDEM linguistique*. Le Forum du bilinguisme rappelle aux personnes inscrites que cette e-plateforme est ouverte au public et que les données personnelles publiées sont de la responsabilité de l’utilisateur. Vous pouvez en tout temps désactiver, par conséquent réactiver votre profil.</p>
<p><sup class="emphasis"><strong>*</strong></sup>Le Forum du bilinguisme ne peut être tenu responsable de la véracité des données publiées, ni du bien-fondé de la démarche des personnes inscrites sur la plateforme. Vous pouvez à tout moment nous signaler un profil ne respectant pas le but de cette plateforme.</p>
<p>En vous inscrivant sur plateforme e-tandem.ch des TANDEMs linguistiques® du Forum du bilinguisme, vous acceptez de publier votre profil<sup class="danger"><strong>*</strong></sup>. Le Forum du bilinguisme souhaite rappeler que cette plateforme est uniquement réservée à la mise en relation de personnes intéressées à pratiquer un TANDEM linguistique®. Le Forum du bilinguisme se réserve le droit de supprimer en tout temps le profil de personnes dont les intentions diffèrent de l’objectif premier de cette plateforme : mettre en contact des personnes de langues différentes dans le but de former et pratiquer un TANDEM linguistique*. Le Forum du bilinguisme rappelle aux personnes inscrites que cette e-plateforme est ouverte au public et que les données personnelles publiées sont de la responsabilité de l’utilisateur. Vous pouvez en tout temps désactiver, par conséquent réactiver votre profil.</p>
<p><sup class="danger"><strong>*</strong></sup>Le Forum du bilinguisme ne peut être tenu responsable de la véracité des données publiées, ni du bien-fondé de la démarche des personnes inscrites sur la plateforme. Vous pouvez à tout moment nous signaler un profil ne respectant pas le but de cette plateforme.</p>
<div class="form-check py-3">
<input class="form-check-input" type="checkbox" value="" id="cgv-check">
<label class="form-check-label" for="cgv-check">

12173
dictionnary.html
View file

File diff suppressed because it is too large Load diff

5
profile.html
View file

@ -9,7 +9,6 @@
<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/js.js"></script>
</head>
<body>
@ -144,8 +143,8 @@
<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>
<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>

33
static/css/main.css
View file

@ -270,7 +270,7 @@ article li:not(:first-of-type){
border: 2px solid white;
border-radius: 50%;
}
.profile .label, #signal-modal label{
.profile .label{
font-weight: 700;
}
.user-description{
@ -318,14 +318,11 @@ article li:not(:first-of-type){
color: white;
padding: 0.5em 1.5em;
}
.btn-cta, .btn-primary, .btn-secondary, .btn-outline-primary, .btn-outline-secondary{
font-size: 1em;
}
.btn:disabled, .btn.disabled{
background: var(--bs-gray-400);
color: var(--bs-gray-600);
border-color: var(--bs-gray-500);
}
/* forms */
.lang-select{
max-width: 12em;
@ -345,33 +342,11 @@ ul, ol{
.rounded{
--bs-border-radius: 2rem;
}
.emphasis{
color: var(--bs-link-color);
}
sup.emphasis{
margin-left: 0.125rem;
margin-right: 0.125rem;
}
.validated{
display: flex;
align-items: center;
}
.validated::before{
content: url('data:image/svg+xml;utf8,<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="m4.5 12.75 6 6 9-13.5" /></svg>');
margin-right: 0.5rem;
width: 1.5em;
height: 1.5em;
display: inline-flex;
}
/*modals*/
.modal-header{
border-bottom: none;
}
.modal-title{
width: 100%;
text-align: center;
}
/* footer */
footer{
@ -468,7 +443,7 @@ nav .icon-ui{
display: grid;
gap: 0 .5rem;
width: fit-content;
margin: calc(var(--div-padding) / 3) auto 0;
margin: calc(var(--div-padding) / 1.25) auto 0;
}
.offcanvas .user-avatar{
margin: 0 auto;

3
static/img/icons/check.svg
View file

@ -1,3 +0,0 @@
<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="m4.5 12.75 6 6 9-13.5" />
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 220 B

14
static/js/check.js
View file

@ -1,14 +0,0 @@
document.addEventListener("DOMContentLoaded", function() {
const checkTerms = document.querySelector('#cgv-check');
const createAccountButton = document.querySelector('#btnCreateAccount');
const readTerms = document.querySelector('#readTerms');
console.log(checkTerms, createAccountButton);
checkTerms.addEventListener("change", function() {
createAccountButton.disabled = !checkTerms.checked;
if (checkTerms.checked) {
readTerms.classList.add("validated");
} else {
readTerms.classList.remove("validated");
}
});
});

13
static/js/js.js → static/js/menu.js
View file

@ -1,14 +1,3 @@
/* tooltips */
function initTooltips(section) {
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));
}
function checkTermsandConditions(){
const checkTerms = document.querySelector('#cgv-check');
const createAccountButton = document.querySelector('#btnCreateAccount');
createAccountButton.disabled = !checkTerms.checked;
}
document.addEventListener("DOMContentLoaded", function() {
const offmenu = document.getElementById("offSideMenu");
const sidemenu = document.getElementById("secondary-nav");
@ -26,6 +15,4 @@ document.addEventListener("DOMContentLoaded", function() {
const mediaQuery = window.matchMedia("(max-width: 992px)");
toggleMenus(mediaQuery); // Initial check
mediaQuery.addEventListener('change', (e) => toggleMenus(e));
initTooltips(document);
});

52
tandem-list.html
View file

@ -9,7 +9,7 @@
<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/js.js"></script>
<script src="static/js/menu.js"></script>
</head>
<body>
@ -3773,13 +3773,13 @@
</div>
</div>
</div>
<p class="user-description">
<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.
</p>
</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" data-bs-toggle="modal" data-bs-target="#signal-modal">Signaler ce profil inapproprié</button>
<button type="button" class="btn btn-link">Signaler ce profil inapproprié</button>
</div>
</div>
</div>
@ -3834,13 +3834,13 @@
</div>
</div>
</div>
<p class="user-description">
<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.
</p>
</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" data-bs-toggle="modal" data-bs-target="#signal-modal">Signaler ce profil inapproprié</button>
<button type="button" class="btn btn-link">Signaler ce profil inapproprié</button>
</div>
</div>
</div>
@ -3874,43 +3874,5 @@
</div>
</footer>
<!-- Modal -->
<div class="modal fade" id="signal-modal" tabindex="-1" aria-label="Signaler un utilisateur" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Signaler le profil de<br>{user-pseudo}</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
</div>
<div class="modal-body">
<form>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet quam eget magna aliquet pretium. In eget orci eu turpis commodo cursus.</p>
<div class="col-lg-4">
<label class="form-label">Motif du signalement</label>
<select class="form-select">
<option selected>Sélectionnez un motif</option>
<option>Spam</option>
<option>Comportement inapproprié</option>
<option>Informations erronées</option>
<option>Autre</option>
</select>
</div>
<div class="mt-3">
<label class="form-label">Précisions</label>
<textarea name="signal-description" id="signal-description" class="form-control" placeholder="Précisez le motif de signalement" rows="4" maxlength="250"></textarea>
</div>
<input type="hidden" id="userId" name="userId" value="12345" />
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
<button type="button" class="btn btn-primary">Envoyer</button>
</div>
</div>
</div>
</div>
</body>
</html>