e-tandem_UI/documents.html
2024-12-19 14:58:41 +01:00

343 lines
25 KiB
HTML

<!DOCTYPE html>
<html lang="fr">
<head>
<title>e-TANDEM · Espace documentaire</title>
<meta charset="UTF-8">
<meta name="robots" content="noindex">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Blabla">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link href="static/css/bootstrap.min.css" rel="stylesheet">
<link href="static/css/main.css" rel="stylesheet">
<script src="static/js/vendor/bootstrap.bundle.min.js"></script>
<script src="static/js/js.js"></script>
</head>
<body data-platform="public" data-screen="documents">
<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="menuToggle" 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>
<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">
<div class="user-avatar">
<img src="static/img/avatars/default-avatar.svg" alt="Priscilla">
<p class="userPseudo">Forum du Bilinguisme</p>
</div>
<ul class="nav">
<li class="nav-item">
<a href="tandem-list.html" 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">
<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">
<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
</a>
</li>
<li class="nav-item">
<a href="profile.html" 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 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">
<path stroke-linecap="round" stroke-linejoin="round" d="m7.875 14.25 1.214 1.942a2.25 2.25 0 0 0 1.908 1.058h2.006c.776 0 1.497-.4 1.908-1.058l1.214-1.942M2.41 9h4.636a2.25 2.25 0 0 1 1.872 1.002l.164.246a2.25 2.25 0 0 0 1.872 1.002h2.092a2.25 2.25 0 0 0 1.872-1.002l.164-.246A2.25 2.25 0 0 1 16.954 9h4.636M2.41 9a2.25 2.25 0 0 0-.16.832V12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 12V9.832c0-.287-.055-.57-.16-.832M2.41 9a2.25 2.25 0 0 1 .382-.632l3.285-3.832a2.25 2.25 0 0 1 1.708-.786h8.43c.657 0 1.281.287 1.709.786l3.284 3.832c.163.19.291.404.382.632M4.5 20.25h15A2.25 2.25 0 0 0 21.75 18v-2.625c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125V18a2.25 2.25 0 0 0 2.25 2.25Z" />
</svg>
Demandes<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 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 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">
<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="sideLang" 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>
</div>
</nav>
</div>
</header>
<main>
<div class="hero hero-secondary container-fluid">
<div>
<div class="row">
<div class="col-lg-6 bottom-anchored order-2 order-lg-1 ">
<img class="img-fluid" src="static/img/ban-5.png">
</div>
<div class="col-lg-6 order-1 order-lg-2">
<h1 class="display-5 fw-bold">Espace documentaire</h1>
</div>
</div>
</div>
</div>
<section class="container-fluid">
<div class="row my-3">
<div id="secondNav" class="col-lg-3">
<nav class="side-menu">
<ul class="nav flex-column mb-auto">
<li class="nav-item">
<a href="tandem-list.html" role="menuitem" class="nav-link">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</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 active" aria-current="page">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="documentsList" class="col-lg-8">
<section>
<h1 class="fs-2 mb-4">Espace documentaire</h1>
<p>Vous trouverez ci-dessous les documents utiles à un TANDEM linguistique.</p>
<p>Si vous souhaitez nous&nbsp;proposer un document que vous avez trouvé utile lors de vos échanges, vous pouvez nous l'envoyer&nbsp;<a href="#" class="text-link" role="button" data-bs-toggle="modal" data-bs-target="#docModal">via le formulaire&nbsp;dédié</a>.</p>
</section>
<div id="documentsResults">
<section class="panel mt-4">
<h1 class="fs-2">Documents du Forum du Bilinguisme</h1>
<ul id="forumDocuments" class="mt-4">
<li class="document">
<a class="text-link" href="medias/FR/FDB_carnet-de-bord_FR_web.pdf" target="_blank" rel="noopener">Carnet de bord</a>
</li>
<li class="document">
<a class="text-link" href="medias/FR/FDB_Accord_prod.pdf" target="_blank" rel="noopener">Accord</a>
</li>
<li class="document">
<p><a class="text-link" href="medias/FR/Guide%20d'utilisation%20e-tandem.ch.pdf" target="_blank" rel="noopener">Guide d'utilisation plateforme e-TANDEM</a></p>
</li>
</ul>
</section>
<section class="panel mt-4">
<h1 class="fs-2">Exercices et bibliographie</h1>
<ul id="forumResources" class="mt-4">
<li class="document">
<a class="text-link" href="medias/FR/cartes_questions.pdf" target="_blank" rel="noopener">Cartes brise-glace</a>
</li>
<li class="document">
<a class="text-link" href="medias/FR/Bibliographie%20V2.pdf" target="_blank" rel="noopener">Bibliographie</a>
</li>
</ul>
</section>
</div>
</section>
</div>
</section>
</main>
<footer>
<div class="container">
<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>
</footer>
<!-- Modal -->
<div class="modal fade" id="docModal" tabindex="-1" aria-label="Déposer un document" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Déposer un document</h5>
</div>
<div class="modal-body">
<form>
<p>Vous allez annuler votre demande de TANDEM avec {&nbsp;userPseudo&nbsp;}, veuillez confirmer votre action.</p>
<p>En cliquant sur Retirer, {&nbsp;userPseudo&nbsp;} sera notifié de cette annulation.</p>
<form action="" method="post">
<div class="component" data-type="text" data-name="Titre du document" data-required="true">
<!--Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="docTitle">Titre du document<span class="emphasis">*</span></label>
<div class="col-md-8">
<input id="docTitle" type="text" name="docTitle" data-name="Titre du document" placeholder="" class="form-control input-md" required>
<span class="help-block"></span>
<span class="text-error"></span>
</div>
</div>
</div>
<div class="component" data-type="text" data-name="Auteur" data-required="false">
<!--Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="docAuthor">Auteur</label>
<div class="col-md-8">
<input id="docAuthor" type="text" name="field6" data-name="Auteur" placeholder="" class="form-control input-md">
<span class="help-block"></span>
<span class="text-error"></span>
</div>
</div>
</div>
<div class="component" data-type="text" data-name="Cadre d'utilisation" data-required="false">
<!--Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="docUsage">Cadre d'utilisation</label>
<div class="col-md-8">
<input id="docUsage" type="text" name="field7" data-name="Cadre d'utilisation" placeholder="" class="form-control input-md">
<span class="help-block"></span>
<span class="text-error"></span>
</div>
</div>
</div>
<div class="component" data-type="textarea" data-name="Commentaires" data-required="false">
<!--Textarea-->
<div class="form-group">
<label class="col-md-4 control-label" for="docNotes">Commentaires</label>
<div class="col-md-8">
<textarea class="form-control" id="docNotes" name="field8" placeholder=""></textarea>
<span class="help-block"></span>
<span class="text-error"></span>
</div>
</div>
</div>
<div class="component" data-type="file" data-name="Télécharger le fichier" data-required="true">
<div class="form-group">
<label class="col-md-4 control-label" for="n82678d02-2f7c-4222-aa4e-7e66c364aa47">Télécharger le fichier<span class="emphasis">*</span></label>
<div class="col-md-8">
<input id="n82678d02-2f7c-4222-aa4e-7e66c364aa47" name="field9" data-name="Télécharger le fichier" type="file" class="form-control input-md" required accept=".xls, .xlsx, .docx, .csv, .ppt, .pptx, .pdf, .png , .jpeg, .zip, .tar, .jpg, .svg, .gif">
<span class="help-block"></span>
<span class="text-error"></span>
</div>
</div>
</div>
<div class="text-right">
<input type="submit" class="btn btn-default" value="Envoyer">
</div>
</form>
</form>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
<button type="submit" class="btn btn-primary">Déposer</button>
</div>
</div>
</div>
</div>
</body>
</html>