Revue HTML/CSS pour obtenir une seule feuille de style + intégration mobile, avec l'aide de Vincent Le Vert

This commit is contained in:
Fabrice PENHOËT 2020-09-04 12:58:44 +02:00
parent 9c4829e773
commit ea70bebf16
45 changed files with 1583 additions and 2518 deletions

View File

@ -10,10 +10,7 @@
<script src="/JS/polyfill.app.js" defer></script>
<script src="/JS/index.app.js" defer></script>
<link rel="shortcut icon" href="/img/favicon.ico">
<link rel="stylesheet" href="/themes/wikilerni/css/common.css" media="screen and (min-width: 970px)">
<link rel="stylesheet" href="/themes/wikilerni/css/common-mobile.css" media="screen and (max-width: 969px)">
<link rel="stylesheet" href="/themes/wikilerni/css/pages.css" media="screen and (min-width: 970px)">
<link rel="stylesheet" href="/themes/wikilerni/css/pages-mobile.css" media="screen and (max-width: 969px)">
<link rel="stylesheet" href="/themes/wikilerni/css/style.css">
</head>
<body class="cardboard">
@ -30,20 +27,22 @@
<div id="prompt" class="cardboard">
<a href="/" title="Page d'accueil WikLerni"><img src="/themes/wikilerni/img/wikilerni-purple-2-512.png" alt="Logo WikiLerni" title="W I K I L E R N I" /></a>
<p class="cardboard">Cultivons notre jardin !</p>
<p>Cultivons notre jardin !</p>
</div>
<div id="page" class="cardboard">
<div class="framed">
<div class="framed engraved">
<h2>Page non trouvée !</h2>
<p class="engraved">La page que vous demandez n'a pas été trouvée !<br>Peut-être a-t'elle été supprimée ou déplacée ?</p>
<p class="engraved">
<p>La page que vous demandez n'a pas été trouvée !<br><a href="/">Aller à la page d'accueil !</a></p>
<p>
<figure>
<img alt="Illustration : page non trouvée" src="/img/404-notfound.png">
<figCaption>Crédit illustration : <a title="coursetakers.ae / CC BY-SA (https://creativecommons.org/licenses/by-sa/4.0)" href="https://commons.wikimedia.org/wiki/File:Found_nothing.png">CC BY-SA coursetakers.ae</a></figCaption>
</figure></p>
</figure>
</p>
</div>
</div>
<footer class="cardboard">
<ul id="footLinks">
<li><a href="https://framasphere.org/people/7e54b7a0b53201389eef2a0000053625" title="Blog WikiLerni sur diaspora*">Blog</a></li>

View File

@ -9,10 +9,7 @@
<script src="/JS/polyfill.app.js" defer></script>
<script src="/JS/index.app.js" defer></script>
<link rel="shortcut icon" href="/img/favicon.ico">
<link rel="stylesheet" href="/themes/wikilerni/css/common.css" media="screen and (min-width: 970px)">
<link rel="stylesheet" href="/themes/wikilerni/css/common-mobile.css" media="screen and (max-width: 969px)">
<link rel="stylesheet" href="/themes/wikilerni/css/pages.css" media="screen and (min-width: 970px)">
<link rel="stylesheet" href="/themes/wikilerni/css/pages-mobile.css" media="screen and (max-width: 969px)">
<link rel="stylesheet" href="/themes/wikilerni/css/style.css">
<link rel="canonical" href="https://www.wililerni.com/a-propos.html">
</head>
@ -25,20 +22,21 @@
<li><a href="/quizs/" id="indexHeadLink" title="Les derniers quizs">Parcourir</a></li>
<li><a href="/connexion.html" id="accountHeadLink">Mon compte</a></li>
<li><a href="/a-propos.html">À propos</a></li>
<li><a href="/" title="Page d'accueil de WikiLerni">Accueil</a></li>
</ul>
</header>
<div id="prompt" class="cardboard">
<a href="/" title="Page d'accueil WikLerni"><img src="/themes/wikilerni/img/wikilerni-purple-2-512.png" alt="Logo WikiLerni" title="W I K I L E R N I" /></a>
<p class="cardboard">Cultivons notre jardin !</p>
<p>Cultivons notre jardin !</p>
</div>
<div id="page" class="cardboard">
<div class="framed">
<div class="framed engraved">
<h2>Qu'est-ce que WikiLerni ?</h2>
<p class="engraved">WikiLerni vous propose de <b>lire une sélection d'articles de Wikipédia</b>.<br>
<p>WikiLerni vous propose de <b>lire une sélection d'articles de Wikipédia</b>.<br>
Suite à chaque lecture, une série de questions vous permet de <b>tester ce que vous avez retenu</b>.<br>
Toutes les réponses à ce quiz se trouvent dans l'article proposé à la lecture.<br>
Vous pouvez sauvegarder vos résultats au quiz en <a href="/inscription.html">créant un compte WikiLerni</a>.<br>
@ -47,7 +45,7 @@
<h2>Que signifie "WikiLerni" ?</h2>
<p class="engraved">Le nom "WikiLerni" est composé de deux parties :
<p>Le nom "WikiLerni" est composé de deux parties :
<ul>
<li>« Wiki » fait évidemment référence à l'encyclopédie en ligne Wikipédia. Comme je vous sais curieux, sachez que le terme « wiki » vient lui-même du mot hawaïen « wikiwiki » signifiant « rapide », « vite » ou « informel ».</li>
<li>« Lerni » est un verbe espéranto signifiant « apprendre » ou encore « étudier ». Vous pouvez penser à « learn » en anglais ou encore « lernen » en allemand.</li>
@ -57,69 +55,68 @@
<h2>À qui s'adresse WikiLerni ?</h2>
<p class="engraved"><b>À toute personne curieuse aimant apprendre de nouvelles choses !</b><br>
<p><b>À toute personne curieuse aimant apprendre de nouvelles choses !</b><br>
Contrairement à d'autres sites de quiz testant votre culture générale, WikiLerni ne vous demande pas d'être déjà très "savants", même si vous l'êtes forcément, au moins dans certains domaines.<br>
<b>Mais vous êtes ici pour apprendre</b> et toutes les réponses aux questions des quizs se trouvent dans l'article qui vous est proposé à la lecture.<br>
C'est donc une façon ludique d'<b>apprendre de nouvelles choses, sur des sujets auxquels vous ne vous seriez peut-être jamais intéressé par vous-même</b>.</p>
<h2>Est-il nécessaire de créer un compte pour utiliser WikiLerni ?</h2>
<p class="engraved">Non, vous pouvez <a href="/quizs" title="Voir les dernières mises à jour">parcourir librement WikiLerni</a> sans avoir besoin d'être connecté au site. <b>Cependant créer un compte vous permettra de :</b>
<p>Non, vous pouvez <a href="/quizs" title="Voir les dernières mises à jour">parcourir librement WikiLerni</a> sans avoir besoin d'être connecté au site. <b>Cependant créer un compte vous permettra de :</b>
<ul>
<li>Sauvegarder vos résultats aux quizs</li>
<li>Recevoir des suggestions de nouvelles lectures, directement par e-mail</li>
<li>Faciliter votre navigation via un moteur de recherche interne à WikiLerni</li>
<li>Sauvegarder vos résultats aux quizs.</li>
<li>Recevoir régulièrement des propositions de lectures/quizs, directement par e-mail.</li>
<li>Faciliter votre navigation parmi les quizs via un moteur de recherche interne à WikiLerni.</li>
<li> + d'autres fonctionnalités à venir...</li>
</ul></p>
<h2>Comment sont sélectionnés les articles proposés par WikiLerni ?</h2>
<p class="engraved">Tout comme Wikipédia, <b>WikiLerni se veut éclectique</b>.<br>
<p>Tout comme Wikipédia, <b>WikiLerni se veut éclectique</b>.<br>
Donc il vous sera proposé des articles sur des sujets très variés : sciences, arts, histoire, littérature, mythologie, géographie, culture populaire, etc.<br>
Il n'y aucun sujet qui ne soit pas digne d'intérêt à priori. <b>Seront évités des articles indiqués par Wikipédia comme de faible qualité, sujets à polémique ou encore réclamant trop de connaissances préalables pour être compris</b>.</p>
<p class="engraved">Les articles proposés à la lecture peuvent être de longueurs variées.<br>
<p>Les articles proposés à la lecture peuvent être de longueurs variées.<br>
Une estimation de la durée de lecture vous est indiquée sur la page du quiz ou encore dans les e-mails reçus si vous êtes abonné.<br>
Vous pourrez ainsi choisir de laisser de côté un article un peu long pour y revenir quand vous aurez plus de temps.<br>
<b>Et vous êtes intéressé par WikiLerni, mais que le temps vous manque pour lire les articles</b>, libre à vous de simplement essayer de répondre au quiz. Après l'envoi de vos réponses, <b>des extraits de l'article Wikipédia apparaissent en dessous de chaque question</b>.<br>C'est rapide et vous pouvez déjà apprendre pas mal de choses de cette manière.</p>
<b>Et si vous êtes intéressé par WikiLerni, mais que le temps vous manque pour lire les articles</b>, libre à vous de simplement essayer de répondre au quiz. Après l'envoi de vos réponses, <b>des extraits de l'article Wikipédia apparaissent en dessous de chaque question</b>.<br>C'est rapide et vous pouvez déjà apprendre pas mal de choses de cette manière.</p>
<p class="engraved">Pour l'instant, les articles proposés sont uniquement francophones.<br>
Mais suivant le succès du site, des versions dans d'autres langues pourront être envisagées.<br>
Si vous souhaitez vous-même lancer une version dans une autre langue, mais n'avez pas les compétences techniques pour le faire, n'hésitez <a href="/contact.html">à me contacter</a> pour un éventuel partenariat.</p>
<p>Pour l'instant, les articles proposés sont uniquement francophones.<br>
Mais suivant le succès du site, des versions de WikiLerni dans d'autres langues pourront être envisagées.</p>
<h2>Quel lien entre WikiLerni et Wikipédia ?</h2>
<p class="engraved">Puisque toutes les suggestions de lecture de WikiLerni vous amènent sur Wikipédia, le lien est évident.<br>
<p>Puisque toutes les suggestions de lecture de WikiLerni vous amènent sur Wikipédia, le lien est évident.<br>
Pour autant, <b>WikiLerni n'est pas un projet porté par la fondation Wikipédia</b>, ni par une de ses associations locales, mais est un projet indépendant.<br>
Au-delà de ce lien pratique, <b>WikiLerni se veut très proche de l'esprit de Wikipédia en partageant son attrait pour la culture libre et le "libre" en général</b>.<br>L'application faisant fonctionner WikiLerni est un logiciel libre, c'est-à-dire que toute personne peut l'utiliser, étudier son code, le modifier, le distribuer selon son souhait.<br>Ceci est également vrai pour le graphisme du site et les quizs eux-mêmes : texte d'introduction, questions/réponses, illustrations... Sauf exceptions indiquées. Pour en savoir plus sur ce sujet, <a href="/credits.html">lisez cette page</a>.</p>
<h2>Est-ce que WikiLerni est gratuit ?</h2>
<p class="engraved">Oui.. Et non ! Réponse de Normand venant d'un Breton ? :-)<br>Vous pouvez tout à fait parcourir WikiLerni, lire les articles proposés et répondre aux quizs.<br>
<b>Tout cela se fait sans avoir besoin de vous abonner et donc gratuitement</b>.<br>Par contre, si vous souhaitez garder vos résultats, recevoir par mail de nouvelles suggestions de lectures... Vous devrez alors vous abonner au site.<br>Vous pourrez alors <b>tester gratuitement l'abonnement pendant une période de découverte</b>.<br>Ensuite, vous serez invité à souscrire à un abonnement, mais à un prix "libre", c'est-à-dire que différentes possibilités vous seront proposées.<br>Tout le monde n'a pas les mêmes moyens, ni le même intérêt pour le WikiLerni, donc à vous de choisir en conscience.</p>
<p class="engraved">Vous aimez WikiLerni, mais ne pouvez vraiment pas payer pour ce service ? <a href="/contact.html">Contactez-moi</a>. Vous n'avez pas à vous justifier.<br>De même, si aucune des options ne vous convient ou encore si vous préférez un autre moyen de paiement (chèque, virement...), <a href="/contact.html">contactez-moi</a> pour me dire ce que vous souhaitez. Des abonnements de groupe (famille, écoles, associations...) ou autres formules peuvent aussi être envisagées, dans la mesure où cela sera techniquement possible.<br>Bref, <b>nous sommes ici plus dans l'esprit d'un financement participatif que dans celui d'un abonnement classique</b>.<br>En souscrivant à un abonnement, vous permettez à WikiLerni d'exister</b>.</p>
<p>Oui.. Et non ! Réponse de Normand venant d'un Breton ? :-)<br>Vous pouvez tout à fait parcourir WikiLerni, lire les articles proposés et répondre aux quizs.<br>
<b>Tout cela se fait sans avoir besoin de vous abonner et donc gratuitement</b>.<br>Par contre, si vous souhaitez garder vos résultats, recevoir par mail des suggestions de lectures..., vous devrez alors vous abonner au site.<br>Vous pourrez alors <b>tester gratuitement l'abonnement pendant une période de découverte</b>.<br>Ensuite, vous serez invité à souscrire à un abonnement, mais à un prix "libre", c'est-à-dire que différentes possibilités vous seront proposées.<br>Tout le monde n'a pas les mêmes moyens, ni le même intérêt pour le WikiLerni, donc à vous de choisir en conscience.</p>
<p>Vous aimez WikiLerni, mais ne pouvez vraiment pas payer pour ce service ? <a href="/contact.html">Contactez-moi</a>. Vous n'avez pas à vous justifier.<br><b>Nous sommes ici plus dans l'esprit d'un financement participatif que dans celui d'un abonnement classique</b>.<br>En souscrivant à un abonnement, vous permettez à WikiLerni d'exister</b>.</p>
<h2>À quoi va servir l'argent de mon abonnement ?</h2>
<p class="engraved">Cet argent va principalement servir à :
<p>Cet argent va principalement servir à :
<ul>
<li>Payer les frais techniques liés au site : serveurs, routeurs e-mail, paiement en ligne...</li>
<li>Développer le logiciel libre permettant à WikiLerni de fonctionner.</li>
<li>Consacrer du temps à sélectionner les articles Wikipédia et préparer les questions. Croyez-moi, cela prend du temps !</li>
<li>Consacrer du temps à sélectionner les articles Wikipédia et préparer les questions. <b>Croyez-moi, cela prend du temps !</b></li>
<li>Gérer le site au quotidien : répondre à vos messages, communiquer, etc.</li>
</ul></p>
<p class="engraved"><b>Tout cela sans vous imposer de publicités ou faire commerce de vos données personnelles.</b><br>
Par ailleurs, une partie des bénéfices nets de WikiLerni seront distribués sous forme de dons à l'<a href="https://www.wikimedia.fr/" target="_blank">association Wikimédia France</a> et aux développeurs des logiciels libres utilisés par WikiLerni.<br>Je parle de bénéfices "nets", car au-delà des frais de fonctionnement, mon activité étant déclarée, il faut y soustraire TVA, cotisations, etc.<br><br>
<p><b>Tout cela sans vous imposer de publicités ou faire commerce de vos données personnelles.</b></p>
<p>Par ailleurs, une partie des bénéfices nets de WikiLerni seront distribués sous forme de dons à l'<a href="https://www.wikimedia.fr/" target="_blank">association Wikimédia France</a> et aux développeurs des logiciels libres utilisés par WikiLerni.<br>Je parle de bénéfices "nets", car au-delà des frais de fonctionnement, mon activité étant déclarée, il faut y soustraire TVA, cotisations, etc.<br><br>
<b>Pas de publicité, respect de vos données personnelles, activité déclarée en France... Cela change, non ?</b></p>
<h2>Comment puis-je aider WikiLerni ?</h2>
<p class="engraved">Tout d'abord en l'utilisant et <a href="/contact.html">me retournant</a> vos éventuelles remarques.<br>
<p>Tout d'abord en l'utilisant et <a href="/contact.html">me retournant</a> vos éventuelles remarques.<br>
<b>Un bug ? Une erreur d'orthographe ? Une suggestion de fonctionnalité ? Quelque chose que vous ne comprenez pas ? N'hésitez pas à me le dire, cela m'intéresse</b>.<br>
Ensuite, si vous avez les moyens, vous pouvez souscrire un abonnement payant pour permettre au projet de perdurer.<br>
Et WikiLerni n'ayant pas les moyens des grandes sociétés pour communiquer, vous pouvez aussi en parler autour de vous, en ligne ou dans la vie de tous les jours. <b>Vous le savez sans doute, rien ne vaut le bouche-à-oreille !</b><br>
Un système de parrainage est d'ailleurs prévu pour vous récompenser : à chaque fois qu'une personne inscrite en vous désignant comme "parrain" souscrit un abonnement payant, votre propre abonnement se trouve prolongé de 30 jours.</p>
<h2><a class="button cardboard" href="/inscription.html" title="Tester gratuitement WikiLerni">Tester WikiLerni.</a></h2>
<p class="btn"><a class="button cardboard" href="/inscription.html" title="Tester gratuitement WikiLerni">Tester gratuitement WikiLerni.</a></p>
</div>
</div>

View File

@ -10,12 +10,7 @@
<script src="/JS/polyfill.app.js" defer></script>
<script src="/JS/homeUser.app.js" defer></script>
<link rel="shortcut icon" href="/img/favicon.ico">
<link rel="stylesheet" href="/themes/wikilerni/css/common.css" media="screen and (min-width: 871px)">
<link rel="stylesheet" href="/themes/wikilerni/css/common-mobile.css" media="screen and (max-width: 870px)">
<link rel="stylesheet" href="/themes/wikilerni/css/home.css" media="screen and (min-width: 751px)">
<link rel="stylesheet" href="/themes/wikilerni/css/home-mobile.css" media="screen and (max-width: 750px)">
<link rel="stylesheet" href="/themes/wikilerni/css/menu.css" media="screen and (min-width: 751px)">
<link rel="stylesheet" href="/themes/wikilerni/css/menu-mobile.css" media="screen and (max-width: 750px)">
<link rel="stylesheet" href="/themes/wikilerni/css/style.css">
</head>
<body class="cardboard">
@ -27,6 +22,7 @@
<li><a href="/quizs/" id="indexHeadLink" title="Les derniers quizs">Parcourir</a></li>
<li><a href="/connexion.html" id="accountHeadLink">Mon compte</a></li>
<li><a href="/a-propos.html">À propos</a></li>
<li><a href="/" title="Page d'accueil de WikiLerni">Accueil</a></li>
</ul>
</header>
@ -37,8 +33,8 @@
<ul id="menu" class="cardboard">
<li><a href="/accueil.html">MON WIKILERNI</a></li>
<li><a href="/compte.html#infos" title="Email, mot de passe">Mes informations</a></li>
<li><a href="/compte.html#subscribe" class="pure-menu-link">Mon abonnement</a></li>
<li><a href="/sortie.html" class="pure-menu-link">Me déconnecter</a></li>
<li><a href="/compte.html#subscribe">Mon abonnement</a></li>
<li><a href="/sortie.html">Me déconnecter</a></li>
</ul>
@ -50,9 +46,9 @@
<form id="search" method="POST">
<input id="searchQuestionnaires" type="text" name="searchQuestionnaires" placeholder="Votre recherche" class="cardboard" />
<input id="begin" type="hidden" name="begin" value="0">
<input type="submit" value="Chercher" class="cardboard" />
<div class="line"><label for="onlyAnswers" class="check"><input type="checkbox" id="onlyAnswers" name="onlyAnswers" /><div class="checkbox_override"></div> Parmi mes réponses.</label></div>
<div class="line"><button type="button" id="random" class="button cardboard">Au hasard !</button></div>
<div class="line"><label for="onlyAnswers" class="check"><input type="checkbox" id="onlyAnswers" name="onlyAnswers" /><div class="checkbox_override"></div> Parmi mes réponses.</li></div>
<input type="submit" value="Chercher" class="cardboard" /><br>
<button type="button" id="random" class="button cardboard">Au hasard !</button>
</form>

View File

@ -9,10 +9,7 @@
<script src="/JS/polyfill.app.js" defer></script>
<script src="/JS/deleteValidation.app.js" defer></script>
<link rel="shortcut icon" href="/img/favicon.ico">
<link rel="stylesheet" href="/themes/wikilerni/css/common.css" media="screen and (min-width: 970px)">
<link rel="stylesheet" href="/themes/wikilerni/css/common-mobile.css" media="screen and (max-width: 969px)">
<link rel="stylesheet" href="/themes/wikilerni/css/links-page.css" media="screen and (min-width: 970px)">
<link rel="stylesheet" href="/themes/wikilerni/css/links-page-mobile.css" media="screen and (max-width: 969px)">
<link rel="stylesheet" href="/themes/wikilerni/css/style.css">
</head>
<body class="cardboard">
@ -24,12 +21,13 @@
<li><a href="/quizs/" id="indexHeadLink" title="Les derniers quizs">Parcourir</a></li>
<li><a href="/connexion.html" id="accountHeadLink">Mon compte</a></li>
<li><a href="/a-propos.html">À propos</a></li>
<li><a href="/" title="Page d'accueil de WikiLerni">Accueil</a></li>
</ul>
</header>
<div id="prompt" class="cardboard">
<a href="/" title="Page d'accueil WikLerni"><img src="/themes/wikilerni/img/wikilerni-purple-2-512.png" alt="Logo WikiLerni" title="W I K I L E R N I" /></a>
<p class="cardboard">Cultivons notre jardin !</p>
<p>Cultivons notre jardin !</p>
<h1 class="cardboard">Validation de la suppression de votre compte</h1>
<div id="response"><p class="error">Si vous voyez ce message, c'est que votre lien de validation n'est pas valide ou a expiré. Vous pouvez <a href="/compte.html">en demander un nouveau en cliquant ici</a>.</p></div>
</div>

View File

@ -9,12 +9,7 @@
<script src="/JS/polyfill.app.js" defer></script>
<script src="/JS/accountUser.app.js" defer></script>
<link rel="shortcut icon" href="/img/favicon.ico">
<link rel="stylesheet" href="/themes/wikilerni/css/common.css" media="screen and (min-width: 871px)">
<link rel="stylesheet" href="/themes/wikilerni/css/common-mobile.css" media="screen and (max-width: 870px)">
<link rel="stylesheet" href="/themes/wikilerni/css/account.css" media="screen and (min-width: 990px)">
<link rel="stylesheet" href="/themes/wikilerni/css/account-mobile.css" media="screen and (max-width: 989px)">
<link rel="stylesheet" href="/themes/wikilerni/css/menu.css" media="screen and (min-width: 751px)">
<link rel="stylesheet" href="/themes/wikilerni/css/menu-mobile.css" media="screen and (max-width: 750px)">
<link rel="stylesheet" href="/themes/wikilerni/css/style.css">
</head>
<body class="cardboard">
@ -26,6 +21,7 @@
<li><a href="/quizs/" id="indexHeadLink" title="Les derniers quizs">Parcourir</a></li>
<li><a href="/connexion.html" id="accountHeadLink">Mon compte</a></li>
<li><a href="/a-propos.html">À propos</a></li>
<li><a href="/" title="Page d'accueil de WikiLerni">Accueil</a></li>
</ul>
</header>
@ -50,8 +46,8 @@
<fieldset><label for="newPassword">Nouveau mot de passe</label><input id="newPassword" type="password" name="newPassword" class="cardboard">
<div id="newPasswordMessage"><span class="info">Laisser vide sauf si vous souhaitez le changer.</span></div></fieldset>
<div class="framed">
<p>Par défaut un nouveau quiz vous est proposé tous les jours. Vous pouvez préciser ci-dessous les jours souhaités.</p>
<ul class="checkbox_list">
<p>Quels jours de la semaine souhaitez-vous recevoir un quiz ?</p>
<ul class="checkbox_li">
<li class="checkbox_li">
<label for="d2" class="check"><input type="checkbox" id="d2" name="d2" value="true" /><div class="checkbox_override"></div> Lundi.</label>
</li>
@ -74,27 +70,28 @@
<label for="d1" class="check"><input type="checkbox" id="d1" name="d1" value="true" /><div class="checkbox_override"></div> Dimanche.</label>
</li>
</ul>
<p>Vous recevrez chaque jour sélectionné un des quizs restants parmi ceux qui ne vous ont pas encore été proposés. Ensuite, un au hasard parmi tous les quizs.</p>
</div>
<ul class="checkbox_list">
<ul class="checkbox_li">
<li class="checkbox_li">
<label for="noticeOk" class="check"><input type="checkbox" id="noticeOk" name="noticeOk" value="true" /><div class="checkbox_override"></div> Je souhaite recevoir les nouveaux quizs par email.</label>
<label for="noticeOk" class="check"><input type="checkbox" id="noticeOk" name="noticeOk" value="true" /><div class="checkbox_override"></div> Je souhaite recevoir les suggestions de quiz par email.</label>
</li>
<li class="checkbox_list">
<label for="newsletterOk" class="check"><input type="checkbox" id="newsletterOk" name="newsletterOk" value="true" /><div class="checkbox_override"></div> J'accepte de recevoir d'autres messages ponctuels de WikiLerni (nouvelles fonctionnalités ...).</label>
<li class="checkbox_li">
<label for="newsletterOk" class="check"><input type="checkbox" id="newsletterOk" name="newsletterOk" value="true" /><div class="checkbox_override"></div> J'accepte de recevoir des messages ponctuels de WikiLerni (nouvelles fonctionnalités ...).</label>
</li>
<li class="checkbox_list">
<li class="checkbox_li">
<label for="deleteOk" class="check"><input type="checkbox" id="deleteOk" name="deleteOk" value="true" /><div class="checkbox_override"></div> <span class="error">Je souhaite supprimer mon compte utilisateur.</span></label>
</li>
</ul>
<div class="input_wrapper"><input type="submit" value="Valider" class="cardboard" id="submitDatas" /></div>
<div class="input_wrapper"><input type="submit" value="Valider." class="cardboard" id="submitDatas" /></div>
</form>
<div id="response"></div>
<h1 class="cardboard" id="subscribe">Votre abonnement</h1>
<div id="subscribeIntro"></div>
<!--<div class="info">Pour l'instant le paiement en ligne n'est pas encore possible.</div>-->
<ul class="checkbox_list">
<form>
<ul class="checkbox_li">
<li class="checkbox_li">
<label for="abo12" class="check"><input type="checkbox" id="abo12" name="abo12" value="true" /><div class="checkbox_override"></div> J'accepte de payer <b>1 € TTC/mois</b>, soit 12 € TTC.</label>
</li>
@ -112,6 +109,7 @@
<label for="CGVOk" class="check" title="Vous devez d'abord choisir le montant de votre abonnement."><input type="checkbox" id="CGVOk" name="CGVOk" value="true" /><div class="checkbox_override"></div> <span class="info">J'ai lu et accepte les <a href="/CGV-CGU.html" target="_blank" rel="noopener">Condition Générales de Vente</a> (obligatoire).</span></label>
</li>
</ul>
</form>
<div id="WPBtns">
<script type="text/javascript">

View File

@ -9,11 +9,7 @@
<script src="/JS/polyfill.app.js" defer></script>
<script src="/JS/connection.app.js" defer></script>
<link rel="shortcut icon" href="/img/favicon.ico">
<link rel="stylesheet" href="/themes/wikilerni/css/common.css" media="screen and (min-width: 970px)">
<link rel="stylesheet" href="/themes/wikilerni/css/common-mobile.css" media="screen and (max-width: 969px)">
<link rel="stylesheet" href="/themes/wikilerni/css/login.css" media="screen and (min-width: 970px)">
<link rel="stylesheet" href="/themes/wikilerni/css/login-mobile.css" media="screen and (max-width: 969px)">
<link rel="canonical" href="https://www.wililerni.com/connexion.html">
<link rel="stylesheet" href="/themes/wikilerni/css/style.css">
</head>
<body class="cardboard">
@ -25,19 +21,20 @@
<li><a href="/quizs/" id="indexHeadLink" title="Les derniers quizs">Parcourir</a></li>
<li><a href="/connexion.html" id="accountHeadLink">Mon compte</a></li>
<li><a href="/a-propos.html">À propos</a></li>
<li><a href="/" title="Page d'accueil de WikiLerni">Accueil</a></li>
</ul>
</header>
<div id="prompt" class="cardboard">
<a href="/" title="Page d'accueil WikLerni"><img src="/themes/wikilerni/img/wikilerni-purple-2-512.png" alt="Logo WikiLerni" title="W I K I L E R N I" /></a>
<p class="cardboard">Cultivons notre jardin !</p>
<p>Cultivons notre jardin !</p>
</div>
<div id="login" class="cardboard">
<h1 class="cardboard">Connectez-vous à WikiLerni</h1>
<noscript>Désolé, mais pour l'instant, l'utilisation de WikiLerni nécessite l'activation du JavaScript.</noscript>
<p class="engraved framed">Pas de compte WikiLerni ? <a href="/inscription.html">créez-le ici</a>.</p>
<p class="engraved framed"><b>Pas encore de compte WikiLerni ? <a href="/inscription.html">créez-le ici</a></b>.</p>
<div id="message"></div>
<form class="needJS" id="connection" method="POST">
<fieldset>
@ -47,7 +44,7 @@
<fieldset>
<label for="password">Mot de passe :</label>
<input id="password" type="password" name="password" placeholder="Votre mot de passe" class="cardboard">
<div id="passwordMessage" class="cardboard"><i>Oublié ? Alors laissez vide et cochez la case ci-dessous.</i></div>
<div id="passwordMessage" class="cardboard"><span class="info">Oublié ? Alors laissez vide et cochez la case ci-dessous.</span></div>
</fieldset>
<ul class="checkbox_li">
@ -60,16 +57,16 @@
</ul>
<div class="input_wrapper">
<input id="submitDatas" type="submit" value="Valider" class="cardboard" />
<input id="submitDatas" type="submit" value="Valider." class="cardboard" />
</div>
</form>
<div id="response"></div>
<div class="framed">
<div id="explanations" class="framed engraved">
<h2>Besoin d'aide ?</h2>
<p class="engraved">Si vous avez <b>oublié votre mot de passe</b>, il vous suffit de cocher la case "Je souhaite recevoir un lien de connexion par e-mail". Un lien valide pendant une courte durée vous permettra de vous connecter au site.</p>
<p class="engraved">Si vous ne vous souvenez pas non plus de l'adresse e-mail utilisée sur ce site ou que vous n'y avez plus accès, vous pouvez <a href="/contact.html">me contacter</a>, en fournissant des informations permettant de vous identifier.</p>
<p class="engraved">La case <b>"Je souhaite ne pas avoir à me connecter à chaque fois."</b> vous permettra de rester connecté jusqu'à 6 mois, pour peu que vous utilisiez le même navigateur internet sur le même ordinateur.</p>
<p>Si vous avez <b>oublié votre mot de passe</b>, il vous suffit de cocher la case "Je souhaite recevoir un lien de connexion par e-mail". Un lien valide pendant une courte durée vous permettra de vous connecter au site.</p>
<p>Si vous ne vous souvenez pas non plus de l'adresse e-mail utilisée sur ce site ou que vous n'y avez plus accès, vous pouvez <a href="/contact.html">me contacter</a>, en fournissant des informations permettant de vous identifier.</p>
<p>La case <b>"Je souhaite ne pas avoir à me connecter à chaque fois."</b> vous permettra de rester connecté jusqu'à 6 mois, pour peu que vous utilisiez le même navigateur internet sur le même ordinateur.</p>
</div>
</div>

View File

@ -9,10 +9,7 @@
<script src="/JS/polyfill.app.js" defer></script>
<script src="/JS/index.app.js" defer></script>
<link rel="shortcut icon" href="/img/favicon.ico">
<link rel="stylesheet" href="/themes/wikilerni/css/common.css" media="screen and (min-width: 970px)">
<link rel="stylesheet" href="/themes/wikilerni/css/common-mobile.css" media="screen and (max-width: 969px)">
<link rel="stylesheet" href="/themes/wikilerni/css/pages.css" media="screen and (min-width: 970px)">
<link rel="stylesheet" href="/themes/wikilerni/css/pages-mobile.css" media="screen and (max-width: 969px)">
<link rel="stylesheet" href="/themes/wikilerni/css/style.css">
</head>
<body class="cardboard">
@ -24,21 +21,28 @@
<li><a href="/quizs/" id="indexHeadLink" title="Les derniers quizs">Parcourir</a></li>
<li><a href="/connexion.html" id="accountHeadLink">Mon compte</a></li>
<li><a href="/a-propos.html">À propos</a></li>
<li><a href="/" title="Page d'accueil de WikiLerni">Accueil</a></li>
</ul>
</header>
<div id="prompt" class="cardboard">
<a href="/" title="Page d'accueil WikLerni"><img src="/themes/wikilerni/img/wikilerni-purple-2-512.png" alt="Logo WikiLerni" title="W I K I L E R N I" /></a>
<p class="cardboard">Cultivons notre jardin !</p>
<p>Cultivons notre jardin !</p>
</div>
<div id="page" class="cardboard">
<div class="framed">
<div class="framed engraved">
<h2>Page de contact</h2>
<p>Pour me contacter, le plus simple est de m'écrire sur l'adresse suivante : <a href="mailto:bonjour@wikilerni.com">bonjour@wikilerni.com</a><br><br>J'essayerai de vous répondre au plus tôt.</p>
<p>Si vous souhaitez échanger par téléphone, merci d'indiquer vos coordonnées téléphoniques, ainsi que les créneaux horaires où vous êtes généralement disponibles.</p>
<p>D'une manière générale, <b>merci de préciser votre demande dans votre message !</b> Ma boule de cristal fonctionne fort mal :)</p>
<p>Si vous êtes adepte du chiffrement des e-mails, vous pouvez <a href="/WikiLerni-pub.asc">télécharger ma clé OpenPGP publique</a>.<br>Si vous ne savez pas de quoi il s'agit, ne vous en préoccupez pas, mais les intéressés devraient apprécier :)</p>
<p>Si vous êtes adepte du chiffrement des e-mails, vous pouvez <a href="/WikiLerni-pub.asc">télécharger ma clé OpenPGP publique</a>. Si vous ne savez pas de quoi il s'agit, ne vous en préoccupez pas, mais les intéressés devraient apprécier :)</p>
<p>
<figure>
<img alt="Illustration : e-mail" src="/img/e-mail.png">
<figCaption>Crédit illustration : <a title="Bruce The Deus / CC BY-SA (https://creativecommons.org/licenses/by-sa/4.0)" href="https://commons.wikimedia.org/wiki/File:Mail_ValeJappo.png">Bruce The Deus / CC BY-SA</a></figCaption>
</figure>
</p>
</div>
</div>
<footer class="cardboard">

View File

@ -9,10 +9,7 @@
<script src="/JS/polyfill.app.js" defer></script>
<script src="/JS/index.app.js" defer></script>
<link rel="shortcut icon" href="/img/favicon.ico">
<link rel="stylesheet" href="/themes/wikilerni/css/common.css" media="screen and (min-width: 970px)">
<link rel="stylesheet" href="/themes/wikilerni/css/common-mobile.css" media="screen and (max-width: 969px)">
<link rel="stylesheet" href="/themes/wikilerni/css/pages.css" media="screen and (min-width: 970px)">
<link rel="stylesheet" href="/themes/wikilerni/css/pages-mobile.css" media="screen and (max-width: 969px)">
<link rel="stylesheet" href="/themes/wikilerni/css/style.css">
<link rel="canonical" href="https://www.wililerni.com/credits.html">
</head>
@ -25,12 +22,13 @@
<li><a href="/quizs/" id="indexHeadLink" title="Les derniers quizs">Parcourir</a></li>
<li><a href="/connexion.html" id="accountHeadLink">Mon compte</a></li>
<li><a href="/a-propos.html">À propos</a></li>
<li><a href="/" title="Page d'accueil de WikiLerni">Accueil</a></li>
</ul>
</header>
<div id="prompt" class="cardboard">
<a href="/" title="Page d'accueil WikLerni"><img src="/themes/wikilerni/img/wikilerni-purple-2-512.png" alt="Logo WikiLerni" title="W I K I L E R N I" /></a>
<p class="cardboard">Cultivons notre jardin !</p>
<p>Cultivons notre jardin !</p>
</div>
<div id="page" class="cardboard">

View File

@ -9,10 +9,7 @@
<script src="/JS/polyfill.app.js" defer></script>
<script src="/JS/index.app.js" defer></script>
<link rel="shortcut icon" href="/img/favicon.ico">
<link rel="stylesheet" href="/themes/wikilerni/css/common.css" media="screen and (min-width: 970px)">
<link rel="stylesheet" href="/themes/wikilerni/css/common-mobile.css" media="screen and (max-width: 969px)">
<link rel="stylesheet" href="/themes/wikilerni/css/pages.css" media="screen and (min-width: 970px)">
<link rel="stylesheet" href="/themes/wikilerni/css/pages-mobile.css" media="screen and (max-width: 969px)">
<link rel="stylesheet" href="/themes/wikilerni/css/style.css">
<link rel="canonical" href="https://www.wililerni.com/donnees.html">
</head>
@ -25,73 +22,73 @@
<li><a href="/quizs/" id="indexHeadLink" title="Les derniers quizs">Parcourir</a></li>
<li><a href="/connexion.html" id="accountHeadLink">Mon compte</a></li>
<li><a href="/a-propos.html">À propos</a></li>
<li><a href="/" title="Page d'accueil de WikiLerni">Accueil</a></li>
</ul>
</header>
<div id="prompt" class="cardboard">
<a href="/" title="Page d'accueil WikLerni"><img src="/themes/wikilerni/img/wikilerni-purple-2-512.png" alt="Logo WikiLerni" title="W I K I L E R N I" /></a>
<p class="cardboard">Cultivons notre jardin !</p>
<p>Cultivons notre jardin !</p>
</div>
<div id="page" class="cardboard">
<div class="framed">
<div class="framed engraved">
<h2>Données, données, données...</h2>
<p class="engraved"><b>CNIL, RGPD</b>... aujourd'hui toutes les organisations souhaitent montrer patte blanche quant au bon usage qu'elles font de vos données personnelles. Cela avec plus ou moins de sincérité et de pédagogie...<br>Ici, je vous explique par le détail <b>quelles données sont traitées par WikiLerni et dans quel but</b>.<br>À noter que cette page ne remplace pas les <a href="/CGV-CGU.html">CGU &amp; CGV du site</a> que vous ne manquerez pas de lire et accepter avant de vous inscrire :)</p>
<p><b>CNIL, RGPD</b>... aujourd'hui toutes les organisations souhaitent montrer patte blanche quant au bon usage qu'elles font de vos données personnelles. Cela avec plus ou moins de sincérité et de pédagogie...<br>Ici, je vous explique par le détail <b>quelles données sont traitées par WikiLerni et dans quel but</b>.<br>À noter que cette page ne remplace pas les <a href="/CGV-CGU.html">CGU &amp; CGV du site</a> que vous ne manquerez pas de lire et accepter avant de vous inscrire :)</p>
<h2>Les données liées à votre abonnement</h2>
<p class="engraved">Lorsque vous créez votre compte, vous devez choisir <b>un pseudonyme</b> qui est complètement libre, donc vous n'êtes pas obligé de saisir votre vrai nom.</p>
<p>Lorsque vous créez votre compte, vous devez choisir <b>un pseudonyme</b> qui est complètement libre, donc vous n'êtes pas obligé de saisir votre vrai nom.</p>
<p class="engraved">De même, <b>votre adresse e-mail</b> est libre. Vous devez juste y avoir accès pour pouvoir valider la création de votre compte.<br>
<p>De même, <b>votre adresse e-mail</b> est libre. Vous devez juste y avoir accès pour pouvoir valider la création de votre compte.<br>
Pour l'instant, WikiLerni ne bloque pas les adresses e-mail jetables. Toutefois, sachez qu'elles peuvent fragiliser la sécurité de votre compte.<br>
Par ailleurs, certains fournisseurs d'adresses e-mail rejettent systématiquement les courriels venant de sites internet et vous ne pourrez donc pas valider votre compte, etc. Ce n'est pas un choix de WikiLerni.</p>
<p class="engraved">Le <b>mot de passe</b> que vous choisissez est évidemment chiffré. Personne n'y a accès et je ne pourrai donc vous le redonner si vous l'avez oublié.<br>
<p>Le <b>mot de passe</b> que vous choisissez est évidemment chiffré. Personne n'y a accès et je ne pourrai donc vous le redonner si vous l'avez oublié.<br>
Mais vous pouvez vous connecter sans mot de passe en demandant à recevoir sur votre adresse e-mail un lien valable pendant une courte durée.</p>
<p class="engraved">En résumé, je peux donc accéder à votre e-mail, le pseudonyme que vous avez choisi, ainsi que quelques informations telles que les dates de création/modification de vos informations ou encore la date approximative de votre dernière connexion. Ceci est utile au bon fonctionnement du site.</p>
<p>En résumé, je peux donc accéder à votre e-mail, le pseudonyme que vous avez choisi, ainsi que quelques informations telles que les dates de création/modification de vos informations ou encore la date approximative de votre dernière connexion. Ceci est utile au bon fonctionnement du site.</p>
<p class="engraved">J'ai aussi évidemment accès aux informations concernant votre abonnement (durée de votre abonnement, jours où vous souhaitez recevoir de nouveaux quizs, période de pauses, etc.). De nouveau, il s'agit d'informations nécessaires au site et que vous pouvez modifier vous-mêmes.</p>
<p>J'ai aussi évidemment accès aux informations concernant votre abonnement (durée de votre abonnement, jours où vous souhaitez recevoir de nouveaux quizs, période de pauses, etc.). De nouveau, il s'agit d'informations nécessaires au site et que vous pouvez modifier vous-mêmes.</p>
<p class="engraved"><b>Lorsque que vous supprimez votre compte, toutes les données sont supprimées immédiatement et définitivement.</b><br>
<p><b>Lorsque que vous supprimez votre compte, toutes les données sont supprimées immédiatement et définitivement.</b><br>
De même, si vous n'avez plus d'abonnement actif et que vous ne vous connectez pas pendant un certain nombre de mois, votre compte et ses informations sont supprimés automatiquement et définitivement.</p>
<p class="engraved">En fait, vos données peuvent toujours apparaître un certain temps dans les sauvegardes du site, mais ne comptez pas sur cela pour récupérer votre compte après une suppression. Ses sauvegardes existent uniquement pour permettre de remettre en route l'ensemble du site en cas d'incident.</p>
<p>En fait, vos données peuvent toujours apparaître un certain temps dans les sauvegardes du site, mais ne comptez pas sur cela pour récupérer votre compte après une suppression. Ses sauvegardes existent uniquement pour permettre de remettre en route l'ensemble du site en cas d'incident.</p>
<p class="engraved">Il existe quelques informations vous concernant auxquelles vous n'avez pas directement accès.<br>Le <b>décalage horaire de votre compte</b> qui est détecté périodiquement lorsque vous vous connectez au site. En effet, pour WikiLerni vous envoie en général ces messages durant la nuit, mais l'heure n'est pas la même suivant si vous habitez en Nouvelle-Calédonie ou en métropole, par exemple.<br>Un champ "mémo" me permet denregistrer des données libres concernant votre compte. Il est vide dans 99 % des cas et ne contient rien de personnel. Mais vous pouvez me demander cette information si vous le souhaitez.</p>
<p>Il existe quelques informations vous concernant auxquelles vous n'avez pas directement accès.<br>Le <b>décalage horaire de votre compte</b> qui est détecté périodiquement lorsque vous vous connectez au site. En effet, pour WikiLerni vous envoie en général ces messages durant la nuit, mais l'heure n'est pas la même suivant si vous habitez en Nouvelle-Calédonie ou en métropole, par exemple.<br>Un champ "mémo" me permet denregistrer des données libres concernant votre compte. Il est vide dans 99 % des cas et ne contient rien de personnel. Mais vous pouvez me demander cette information si vous le souhaitez.</p>
<p class="engraved">En tant qu'éditeur du site, je suis pour l'instant la seule personne à avoir accès aux informations ci-dessus. Mais dans l'avenir je peux m'entourer d'autres personnes pour gérer le site. <b>En aucun cas, ces informations seront cédées ou vendues à un tiers</b>.</p>
<p>En tant qu'éditeur du site, je suis pour l'instant la seule personne à avoir accès aux informations ci-dessus. Mais dans l'avenir je peux m'entourer d'autres personnes pour gérer le site. <b>En aucun cas, ces informations seront cédées ou vendues à un tiers</b>.</p>
<h2>Les prestataires</h2>
<p class="engraved">Le site WikiLerni est hébergé sur un <a href="https://iplookup.flagfox.net/?host=www.wikilerni.com" title="Vérifiez" target="_blank"rel="noopener">serveur situé en France</a>, appartenant à une entreprise elle-même française (alwaysdata).</p>
<p>Le site WikiLerni est hébergé sur un <a href="https://iplookup.flagfox.net/?host=www.wikilerni.com" title="Vérifiez" target="_blank"rel="noopener">serveur situé en France</a>, appartenant à une entreprise elle-même française (alwaysdata).</p>
<p class="engraved">Pour envoyer ses e-mails en essayant d'éviter de se retrouver en "spam", WikiLerni utilise les services d'un routeur e-mail.<br>
<p>Pour envoyer ses e-mails en essayant d'éviter de se retrouver en "spam", WikiLerni utilise les services d'un routeur e-mail.<br>
De nouveau, il s'agit d'une société française (Spirion), ses serveurs étant eux-mêmes situés en France (chez l'hébergeur OVH), au moment où j'écris ce texte. Je l'ai sélectionnée pour cela.<br>
Donc, en théorie, ce prestataire peut avoir accès à votre adresse e-mail, mais à aucune autre information.<br>
À noter, qu'<b>il n'y aucun pistage des affichages ou clics des messages envoyés par WikiLerni</b>, ce qui est chose rare !</p>
<h2>Les données de facturation</h2>
<p class="engraved">Si vous optez pour un abonnement prémium, vous devrez passer par le site de la société WebPortage/Nodalys qui est une société de portage salarial me permettant d'avoir une activité déclarée en France. Les employés de Nodalys ont donc accès à vos données de facturation. Pour en savoir plus sur ce sujet, <a href="https://www.webportage.com/protection-donnees-cookies" target="_blank" rel="noopener" title="Site de WebPortage">vous pouvez cliquer ici</a>.</p>
<p>Si vous optez pour un abonnement prémium, vous devrez passer par le site de la société WebPortage/Nodalys qui est une société de portage salarial me permettant d'avoir une activité déclarée en France. Les employés de Nodalys ont donc accès à vos données de facturation. Pour en savoir plus sur ce sujet, <a href="https://www.webportage.com/protection-donnees-cookies" target="_blank" rel="noopener" title="Site de WebPortage">vous pouvez cliquer ici</a>.</p>
<p class="engraved"><b>Ce logiciel de facturation est indépendant de WikiLerni</b>, tout comme ceux de Paypal ou Paybox qui vous permettrons de payer votre abonnement en ligne. Si vous souhaitez éviter de passer par Paypal ou Paybox, vous pouvez me contacter pour demander un paiement par chèque ou virement.</p>
<p><b>Ce logiciel de facturation est indépendant de WikiLerni</b>, tout comme ceux de Paypal ou Paybox qui vous permettrons de payer votre abonnement en ligne. Si vous souhaitez éviter de passer par Paypal ou Paybox, vous pouvez me contacter pour demander un paiement par chèque ou virement.</p>
<h2>Les statistiques de visite</h2>
<p class="engraved">Lorsque l'on gère un site internet, il est difficile de naviguer complètement à vue et avoir certaines informations sur les visites de son site est utile.<br><b>Pour ce faire WikiLerni privilégie en toute cohérence un logiciel libre nommé Matomo</b>.<br>
<p>Lorsque l'on gère un site internet, il est difficile de naviguer complètement à vue et avoir certaines informations sur les visites de son site est utile.<br><b>Pour ce faire WikiLerni privilégie en toute cohérence un logiciel libre nommé Matomo</b>.<br>
Ce logiciel est configuré conformément aux préconisations de la CNIL, c'est-à-dire, entre autres, pour ne pas collecter votre adresse IP, qui est une information permettant de vous identifier sur Internet.<br>
Par ailleurs, Matomo est inactif lorsque vous êtes connecté à votre compte WikiLerni.<br>
Cet outil est installé sur un serveur internet situé en France et de nouveau, je suis la seule personne à avoir accès à ces informations.</p>
<p class="engraved">Si vous souhaitez vous opposer à ce suivi statistique, vous pouvez utiliser le lien suivant :<br>
<iframe src="https://stats.le-fab-lab.com/index.php?module=CoreAdminHome&amp;action=optOut&amp;language=fr" style="border: 0; height: 200px; width: 600px;"></iframe><br>
<p>Si vous souhaitez vous opposer à ce suivi statistique, vous pouvez utiliser le lien suivant :<br>
<iframe src="https://stats.le-fab-lab.com/index.php?module=CoreAdminHome&amp;action=optOut&amp;language=fr" style="border: 0; width: 100%;"></iframe><br>
Ceci est inutile si vous avez coché l'option « Ne pas me pister » de votre navigateur internet.</p>
<p class="engraved"><b>Pour toutes questions/réclamations concernant vos données personnelles sur WikiLerni, <a href="/contact.html">n'hésitez pas à me contacter</a></b>.</p>
<p><b>Pour toutes questions/réclamations concernant vos données personnelles sur WikiLerni, <a href="/contact.html">n'hésitez pas à me contacter</a></b>.</p>
</div>
</div>

BIN
front/public/img/e-mail.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 28 KiB

View File

@ -9,10 +9,7 @@
<script src="/JS/polyfill.app.js" defer></script>
<script src="/JS/subscribe.app.js" defer></script>
<link rel="shortcut icon" href="/img/favicon.ico">
<link rel="stylesheet" href="/themes/wikilerni/css/common.css" media="screen and (min-width: 970px)">
<link rel="stylesheet" href="/themes/wikilerni/css/common-mobile.css" media="screen and (max-width: 969px)">
<link rel="stylesheet" href="/themes/wikilerni/css/signup.css" media="screen and (min-width: 970px)">
<link rel="stylesheet" href="/themes/wikilerni/css/signup-mobile.css" media="screen and (max-width: 969px)">
<link rel="stylesheet" href="/themes/wikilerni/css/style.css">
<link rel="canonical" href="https://www.wililerni.com/inscription.html">
</head>
@ -25,12 +22,13 @@
<li><a href="/quizs/" id="indexHeadLink" title="Les derniers quizs">Parcourir</a></li>
<li><a href="/connexion.html" id="accountHeadLink">Mon compte</a></li>
<li><a href="/a-propos.html">À propos</a></li>
<li><a href="/" title="Page d'accueil de WikiLerni">Accueil</a></li>
</ul>
</header>
<div id="prompt" class="cardboard">
<img src="/themes/wikilerni/img/wikilerni-purple-2-512.png" alt="Logo WikiLerni" title="W I K I L E R N I" />
<p class="cardboard">Cultivons notre jardin !</p>
<p>Cultivons notre jardin !</p>
</div>
<div id="signup" class="cardboard">
@ -40,24 +38,24 @@
<noscript>Désolé, mais pour l'instant, l'utilisation de WikiLerni nécessite l'activation du JavaScript.</noscript>
<form class="needJS" id="subscription" method="POST">
<fieldset>
<label for="name">Nom ou pseudonyme : </label><input id="name" type="text" name="name" placeholder="Pseudo de votre choix" class="cardboard" >
<label for="name">Nom ou pseudonyme : </label><input id="name" type="text" name="name" placeholder="Nom de votre choix" class="cardboard" >
</fieldset>
<fieldset>
<label for="email">E-mail : </label><input id="email" type="email" name="email" placeholder="Adresse e-mail" class="cardboard">
<div id="emailMessage" class="cardboard"></div>
<div id="emailMessage"></div>
</fieldset>
<fieldset>
<label for="password">Mot de passe : </label><input id="password" type="password" name="password" placeholder="Mot de passe de votre choix" class="cardboard">
<div id="passwordMessage" class="cardboard"><i>Au moins 8 caractères. <a href="#password" id="getPassword">Générer un mot de passe</a>.</i></div>
<div id="passwordMessage"><span class="info">Au moins 8 caractères. <a href="#password" id="getPassword">Générer un mot de passe</a>.</span></div>
</fieldset>
<fieldset>
<label for="codeGodfather">Code/e-mail parrain : </label><input id="codeGodfather" type="text" name="codeGodfather" placeholder="Code ou email de votre parrain." class="cardboard">
<div id="codeGodfatherMessage" class="cardboard"><i>Facultatif.</i></div>
<label for="codeGodfather">Code ou e-mail parrain : </label><input id="codeGodfather" type="text" name="codeGodfather" placeholder="Code ou email de votre parrain." class="cardboard">
<div id="codeGodfatherMessage"><span class="info">Facultatif.</span></div>
</fieldset>
@ -66,22 +64,22 @@
<label for="cguOk" class="check"><input type="checkbox" id="cguOk" name="cguOk" value="true" /><div class="checkbox_override"></div> J'accepte <a href="/CGV-CGU.html" target="_blank" rel="noopener" title="À lire :)">les Conditions Générale d'Utilisation</a> du site (requis).</label>
</li>
<li class="checkbox_li">
<label for="newsletterOk" class="check"><input type="checkbox" id="newsletterOk" name="newsletterOk" value="true" /><div class="checkbox_override"></div> Je souhaite recevoir de nouveaux quizs par e-mail (facultatif et vous pourrez stopper facilement).</label>
<label for="newsletterOk" class="check"><input type="checkbox" id="newsletterOk" name="newsletterOk" value="true" /><div class="checkbox_override"></div> Je souhaite recevoir des suggestions de quiz par e-mail (facultatif et vous pourrez stopper facilement).</label>
</li>
</ul>
<div class="input_wrapper">
<input id="submitDatas" type="submit" value="Valider" class="cardboard" />
<input id="submitDatas" type="submit" value="Valider." class="cardboard" />
</div>
</form>
<div id="response"></div>
<div class="framed">
<div id="explanations" class="framed engraved">
<h2>Besoin d'aide ?</h2>
<p class="engraved">La saisie d'un pseudonyme, d'une adresse e-mail et d'un mot de passe <b>est obligatoire</b> et <b>vous devez accepter les Conditions Générales d'Utilisation</b>.</p>
<p class="engraved">Votre pseudonyme est complétement libre, mais servira à personnaliser certains affichages.</p>
<p class="engraved"><b>Vous recevrez un lien sur l'adresse e-mail saisie</b> sur lequel vous devrez cliquer pour valider la création de votre compte.</p>
<p class="engraved"><b>Votre mot de passe doit compter au moins 8 caractères.</b> Si vous manquez d'inspiration, cliquez sur le lien "Générer un mot de passe" pour en obtenir un.</p>
<p class="engraved">Si vous connaissez une personne déjà inscrite à WikiLerni, <b>vous pouvez fournir son code parrain ou encore son adresse e-mail</b>. Dans le cas où vous optez ensuite pour un abonnement prémium, il sera alors allongé de 30 jours grâce à ce parrainage.</p>
<p>La saisie d'un pseudonyme, d'une adresse e-mail et d'un mot de passe <b>est obligatoire</b> et <b>vous devez accepter les Conditions Générales d'Utilisation</b>.</p>
<p>Votre pseudonyme est complétement libre, mais servira à personnaliser certains affichages.</p>
<p><b>Vous recevrez un lien sur l'adresse e-mail saisie</b> sur lequel vous devrez cliquer pour valider la création de votre compte.</p>
<p><b>Votre mot de passe doit compter au moins 8 caractères.</b> Si vous manquez d'inspiration, cliquez sur le lien "Générer un mot de passe" pour en obtenir un.</p>
<p>Si vous connaissez une personne déjà inscrite à WikiLerni, <b>vous pouvez fournir son code parrain ou encore son adresse e-mail</b>. Dans le cas où vous optez ensuite pour un abonnement prémium, il sera alors allongé de 30 jours grâce à ce parrainage.</p>
</div>
</div>

View File

@ -9,10 +9,7 @@
<script src="/JS/polyfill.app.js" defer></script>
<script src="/JS/loginLink.app.js" defer></script>
<link rel="shortcut icon" href="/img/favicon.ico">
<link rel="stylesheet" href="/themes/wikilerni/css/common.css" media="screen and (min-width: 970px)">
<link rel="stylesheet" href="/themes/wikilerni/css/common-mobile.css" media="screen and (max-width: 969px)">
<link rel="stylesheet" href="/themes/wikilerni/css/links-page.css" media="screen and (min-width: 970px)">
<link rel="stylesheet" href="/themes/wikilerni/css/links-page-mobile.css" media="screen and (max-width: 969px)">
<link rel="stylesheet" href="/themes/wikilerni/css/style.css">
</head>
<body class="cardboard">
@ -24,6 +21,7 @@
<li><a href="/quizs/" id="indexHeadLink" title="Les derniers quizs">Parcourir</a></li>
<li><a href="/connexion.html" id="accountHeadLink">Mon compte</a></li>
<li><a href="/a-propos.html">À propos</a></li>
<li><a href="/" title="Page d'accueil de WikiLerni">Accueil</a></li>
</ul>
</header>

View File

@ -9,11 +9,7 @@
<script src="/JS/polyfill.app.js" defer></script>
<script src="/JS/index.app.js" defer></script>
<link rel="shortcut icon" href="/img/favicon.ico">
<link rel="stylesheet" href="/themes/wikilerni/css/common.css" media="screen and (min-width: 970px)">
<link rel="stylesheet" href="/themes/wikilerni/css/common-mobile.css" media="screen and (max-width: 969px)">
<link rel="stylesheet" href="/themes/wikilerni/css/pages.css" media="screen and (min-width: 970px)">
<link rel="stylesheet" href="/themes/wikilerni/css/pages-mobile.css" media="screen and (max-width: 969px)">
<!-- <link rel="stylesheet" href="/themes/wikilerni/css/style.css"> -->
<link rel="stylesheet" href="/themes/wikilerni/css/style.css">
</head>
<body class="cardboard">
@ -31,11 +27,11 @@
<div id="prompt" class="cardboard">
<a href="/" title="Page d'accueil WikLerni"><img src="/themes/wikilerni/img/wikilerni-purple-2-512.png" alt="Logo WikiLerni" title="W I K I L E R N I" /></a>
<p class="cardboard">Cultivons notre jardin !</p>
<p>Cultivons notre jardin !</p>
</div>
<div id="page" class="cardboard">
<div class="framed">
<div class="framed engraved">
<h2>Merci !</h2>
<p>Votre paiement vient d'être enregistré. Merci à vous !</p>
<p>Normalement, vous avez reçu une facture par e-mail et votre abonnement vient d'être prolongé.</p>

View File

@ -9,10 +9,7 @@
<script src="/JS/polyfill.app.js" defer></script>
<script src="/JS/newLoginValidation.app.js" defer></script>
<link rel="shortcut icon" href="/img/favicon.ico">
<link rel="stylesheet" href="/themes/wikilerni/css/common.css" media="screen and (min-width: 970px)">
<link rel="stylesheet" href="/themes/wikilerni/css/common-mobile.css" media="screen and (max-width: 969px)">
<link rel="stylesheet" href="/themes/wikilerni/css/links-page.css" media="screen and (min-width: 970px)">
<link rel="stylesheet" href="/themes/wikilerni/css/links-page-mobile.css" media="screen and (max-width: 969px)">
<link rel="stylesheet" href="/themes/wikilerni/css/style.css">
</head>
<body class="cardboard">
@ -24,13 +21,15 @@
<li><a href="/quizs/" id="indexHeadLink" title="Les derniers quizs">Parcourir</a></li>
<li><a href="/connexion.html" id="accountHeadLink">Mon compte</a></li>
<li><a href="/a-propos.html">À propos</a></li>
<li><a href="/" title="Page d'accueil de WikiLerni">Accueil</a></li>
</ul>
</header>
<div id="prompt" class="cardboard">
<a href="/" title="Page d'accueil WikLerni"><img src="/themes/wikilerni/img/wikilerni-purple-2-512.png" alt="Logo WikiLerni" title="W I K I L E R N I" /></a>
<p class="cardboard">Cultivons notre jardin !</p>
<div id="response" class="error">Si vous voyez ce message, c'est que votre lien de validation n'est pas valide ou a expiré. Vous pouvez <a href="/compte.html">en demander un nouveau en cliquant ici</a>.</div>
<p>Cultivons notre jardin !</p>
<h1 class="cardboard">Validation de vos nouveaux identifiants</h1>
<div id="response"><p class="error">Si vous voyez ce message, c'est que votre lien de validation n'est pas valide ou a expiré. Vous pouvez <a href="/compte.html">en demander un nouveau en cliquant ici</a>.</p></div>
</div>
<footer class="cardboard">

View File

@ -9,10 +9,7 @@
<script src="/JS/polyfill.app.js" defer></script>
<script src="/JS/deconnection.app.js" defer></script>
<link rel="shortcut icon" href="/img/favicon.ico">
<link rel="stylesheet" href="/themes/wikilerni/css/common.css" media="screen and (min-width: 970px)">
<link rel="stylesheet" href="/themes/wikilerni/css/common-mobile.css" media="screen and (max-width: 969px)">
<link rel="stylesheet" href="/themes/wikilerni/css/links-page.css" media="screen and (min-width: 970px)">
<link rel="stylesheet" href="/themes/wikilerni/css/links-page-mobile.css" media="screen and (max-width: 969px)">
<link rel="stylesheet" href="/themes/wikilerni/css/style.css">
</head>
<body class="cardboard">
@ -24,12 +21,13 @@
<li><a href="/quizs/" id="indexHeadLink" title="Les derniers quizs">Parcourir</a></li>
<li><a href="/connexion.html" id="accountHeadLink">Mon compte</a></li>
<li><a href="/a-propos.html">À propos</a></li>
<li><a href="/" title="Page d'accueil de WikiLerni">Accueil</a></li>
</ul>
</header>
<div id="prompt" class="cardboard">
<a href="/" title="Page d'accueil WikLerni"><img src="/themes/wikilerni/img/wikilerni-purple-2-512.png" alt="Logo WikiLerni" title="W I K I L E R N I" /></a>
<p class="cardboard">Cultivons notre jardin !</p>
<p>Cultivons notre jardin !</p>
<h1 class="cardboard">Au revoir !</h1>
<div id="response"><p class="error">Si vous voyez ce message, c'est qu'un problème a été rencontré durant la déconnexion.<br>N'hésitez pas <a href="/contact.html">à nous prévenir</a> si le problème persiste.</p></div>
</div>

View File

@ -9,10 +9,7 @@
<script src="/JS/polyfill.app.js" defer></script>
<script src="/JS/unsubscribe.app.js" defer></script>
<link rel="shortcut icon" href="/img/favicon.ico">
<link rel="stylesheet" href="/themes/wikilerni/css/common.css" media="screen and (min-width: 970px)">
<link rel="stylesheet" href="/themes/wikilerni/css/common-mobile.css" media="screen and (max-width: 969px)">
<link rel="stylesheet" href="/themes/wikilerni/css/links-page.css" media="screen and (min-width: 970px)">
<link rel="stylesheet" href="/themes/wikilerni/css/links-page-mobile.css" media="screen and (max-width: 969px)">
<link rel="stylesheet" href="/themes/wikilerni/css/style.css">
</head>
<body class="cardboard">
@ -24,13 +21,15 @@
<li><a href="/quizs/" id="indexHeadLink" title="Les derniers quizs">Parcourir</a></li>
<li><a href="/connexion.html" id="accountHeadLink">Mon compte</a></li>
<li><a href="/a-propos.html">À propos</a></li>
<li><a href="/" title="Page d'accueil de WikiLerni">Accueil</a></li>
</ul>
</header>
<div id="prompt" class="cardboard">
<a href="/" title="Page d'accueil WikLerni"><img src="/themes/wikilerni/img/wikilerni-purple-2-512.png" alt="Logo WikiLerni" title="W I K I L E R N I" /></a>
<p class="cardboard">Cultivons notre jardin !</p>
<div id="response" class="error">Si vous voyez ce message, c'est que votre lien de désabonnement ne fonctionne pas. Vous pouvez <a href="/compte.html">accéder à votre compte</a> pour désactiver les envois.</div>
<p>Cultivons notre jardin !</p>
<h1 class="cardboard">Stopper l'envoi des e-mail</h1>
<div id="response"><p class="error">Si vous voyez ce message, c'est que votre lien de désabonnement n'a pas fonctionné correctement. Vous pouvez <a href="/compte.html">accéder à votre compte</a> pour désactiver les envois.</p></div>
</div>
<footer class="cardboard">

View File

@ -1,67 +0,0 @@
#account fieldset
{
width: 80%;
margin: auto;
}
#account label
{
width: 49%;
margin-right: 1%;
text-align: right;
display: inline-block;
}
#account label.check
{
text-align: left;
width:100%;
display: inline;
}
#account
{background-color: #FF8800;
width: 85%;
margin: auto;
padding-top: 2.5em;
margin-top: -2.5em;
box-shadow: 0px 0px 5px black;
padding-bottom: 2.5em;
margin-bottom: -2.5em;
text-align: center;}
#account h1
{width: 105%;
background-color: #FF8800;
box-shadow: 0px 0px 5px black;
margin-left: -2.5%;
text-align: center;
border-radius: 5px;
padding-top: 0.5em;
padding-bottom: 0.5em;
border-top: 1px solid rgba(255,255,255,0.5);
border-bottom: 1px solid rgba(0, 0, 0, 0.5);}
#account p,
#account ul
{margin: 1em;
text-align: justify;}
#account .error, #account .info, #account .success
{
margin: 1em;
width: auto;
border-radius: 5px;
}
@media screen and (max-width: 660px) {
#account label
{width: 100%;
text-align: center;
display: inline-block;}
#account fieldset input
{display: block;
margin: auto;}
}

View File

@ -1,49 +0,0 @@
#account fieldset { width: 80%; }
#account label
{
width: 49%;
margin-right: 1%;
text-align: right;
display: inline-block;
}
#account label.check
{
text-align: left;
width:100%;
display: inline;
}
#account
{background-color: #FF8800;
width: 50%;
margin: auto;
padding-top: 2.5em;
margin-top: -2.5em;
box-shadow: 0px 0px 5px black;
padding-bottom: 2.5em;
margin-bottom: -2.5em;
text-align: center;}
#account h1
{width: 105%;
background-color: #FF8800;
box-shadow: 0px 0px 5px black;
margin-left: -2.5%;
text-align: center;
border-radius: 5px;
padding-top: 0.5em;
padding-bottom: 0.5em;
border-top: 1px solid rgba(255,255,255,0.5);
border-bottom: 1px solid rgba(0, 0, 0, 0.5);}
#account p,
#account ul
{margin: 1em;
text-align: justify;}
#account .error, #account .info, #account .success
{
margin: 1em;
width: auto;
border-radius: 5px;
}

View File

@ -1,314 +0,0 @@
@font-face {
font-family: Millimetre;
src: url(../webfonts/Light/Millimetre-Light_web.woff);
font-weight: lighter;
}
@font-face {
font-family: Millimetre;
src: url(../webfonts/Regular/Millimetre-Regular_web.woff);
font-weight: regular;
}
@font-face {
font-family: Millimetre;
src: url(../webfonts/Bold/Millimetre-Bold_web.woff);
font-weight: bold;
}
body
{margin: 0px;
overflow-x: hidden;
background-color: #8c599c;}
body,
a,
input
{font-family: Millimetre;
font-weight: regular;
color: rgba(255,255,255,1);
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.75);}
input, #headLinks a, #footLinks a, a.button,
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a
{
text-decoration: none;
outline: none;
}
a:hover
{
color: rgba(0,0,0,0.66);
text-shadow: 0px 1px 0px rgba(255,255,255,0.75);
}
a.button:hover
{
color:white;
text-shadow:none;
}
header,
footer
{background-color: #FF8800;
border-bottom: 1px solid rgba(0,0,0,0.75);
box-shadow: 0px 0px 10px black;
font-size: 1.5em;
width: 100%;
height:100px;
margin-top: 1em;
transform: rotate(0.66deg);}
footer
{font-size: 1em;}
/*
header img
{max-height:80px;
margin-left:10px;
margin-top: 10px;
display: inline-block;}*/
header img
{
display:none;
}
header ul
{
width:100%;
}
header ul, footer ul
{list-style-type: none;
display: inline-block;
float: right;
line-height: 50px;}
header ul li
{float: right;
display: block;}
footer ul li
{margin-top: 10px;
display:inline-block;}
footer ul
{width: 100%;}
header ul li::after,
footer ul li::after
{width: 1px;
height: 80px;
display: block;
float: right;
content: '';
margin-left: 1em;
margin-top: -20px;
background: linear-gradient(to top, rgba(255,255,255,0.25), rgba(255,255,255,0.0));}
header ul li::before,
footer ul li::before
{width: 1px;
height: 80px;
display: block;
float: right;
content: '';
margin-top: -20px;
margin-right: 1em;
background: linear-gradient(to top, rgba(0,0,0,0.25), rgba(0,0,0,0.0));}
header ul li:first-child::after,
footer ul li:last-child::after
{display: none;}
header ul li:first-child::before,
footer ul li:last-child::before
{display: none;}
header ul li:first-child,
footer ul li:first-child
{margin-right: 1em;}
footer
{transform: rotate(-0.66deg);
clear: both;
text-align: center;}
fieldset
{border: 0px;
text-align: left;}
.needJS
{
display: none;
}
label
{width: 50%;}
.engraved
{
color: white;
text-shadow: 0px -1px 0px rgba(0, 0, 0, 1);
font-family: verdana;
}
.framed
{border: 1px solid rgba(0, 0, 0, 0.33);
border-radius: 5px;
box-shadow: 0px 1px 0px rgba(255,255,255,0.5), inset 0px 1px 0px rgba(255,255,255,0.33);
display: inline-block;
margin: 1em;}
.cardboard
{
background-opacity: 0.75;
background-image: url('../img/background-texture.png');
}
#explanations
{
padding: 0.7em;
}
#explanations p
{
margin:1.3em;
text-align:left;
}
/* This allow the motion of the button while overing without displacing the content of the page */
.input_wrapper
{
height: 40px;
display: inline-block;
margin-top: 1em;
}
input[type=submit], input[type=text], input[type=email], input[type=password], .button
{
background-color: #8c599c;
padding: 10px;
border: 0px;
border-radius: 3px;
margin-top:-10px;
color: white;
font-family: sans;
font-weight: bold;
font-size: 0.6em;
position: relative;
transition: 0.125s ease all;
margin-top: 0px;
box-shadow: inset 0px 1px 0px rgba(255,255,255,0.66), inset 0px -1px 0px rgba(0, 0, 0,0.66), 0px 3px 8px rgba(0,0,0,0.66);
}
input[type=submit]:hover,
.button:hover
{margin-top: 2px;
box-shadow: inset 0px 1px 0px rgba(255,255,255,0.66), inset 0px -1px 0px rgba(0, 0, 0,0.66), 0px 0px 5px rgba(0,0,0,0.66);}
input[type=text], input[type=password], input[type=email] {
box-shadow: inset 0px 1px 0px rgba(0,0,0,0.66), inset 0px -1px 0px rgba(255,255,255,0.66), inset 0px 3px 8px rgba(0,0,0,0.66);}
input[type=checkbox]
{width:15px;
height:15px;
margin-left: 0px;
margin-right: -15px;
opacity:0.0;}
/* The following is a trick to force browser to let me redefine checkbox style */
.checkbox_override
{width: 15px;
height: 15px;
border-radius: 2px;
box-shadow: inset 0px 2px 2px rgba(0, 0, 0, 0.5);
background-color: rgba(0, 0, 0, 0.25);
border-top: 1px solid rgba(0,0,0,0.75);
border-bottom: 1px solid rgba(255,255,255,0.5);
display: inline-block;}
input:hover ~ .checkbox_override
{background-color: rgba(0, 0, 0, 0.125);}
input:checked ~ .checkbox_override {
border-bottom: 1px solid rgba(0,0,0,0.75);
border-top: 1px solid rgba(255,255,255,0.5);
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.5);
background-color: rgba(255, 255, 255, 0.25);
}
::placeholder
{
color:#c6b4cb;
}
/*#ERROR:target, #SUCCESS:target, #INFO:target,*/
p.error, p.success, p.info,
div.error, div.success, div.info
{
width: calc(100% - 20px);
height: auto;
padding: 1em;
opacity: 1;
margin-left: 0px;
line-height: 1.25em;
background-image: url('../img/background-texture.png');
}
.info {background-color: #8c599c;}
.success {background-color: #00c684;}
.error {background-color: red;}
@media screen and (max-width: 570px) {
header ul
{line-height: 66px;}
header
{font-size: 1em;}
}
@media screen and (max-width: 600px) {
footer
{font-size: 0.7em;}
header ul li::after,
footer ul li::after
{display: none;}
header ul li,
footer ul li
{display: inline-block;
margin-left: 0.2em;
margin-right: 0.2em;}
header ul li::before,
footer ul li::before
{display: none;}
header
{
height:60px;
}
}
@media screen and (max-width: 400px) {
header
{font-size: 0.75em;}
footer ul
{line-height: 25px;}
header ul
{line-height: 75px;}
}
#zerozozio
{
margin:1em;
text-align:right;
}
#zerozozio a, span
{
padding:0 0.3em;
}

View File

@ -1,252 +0,0 @@
@font-face {
font-family: Millimetre;
src: url(../webfonts/Light/Millimetre-Light_web.woff);
font-weight: lighter;
}
@font-face {
font-family: Millimetre;
src: url(../webfonts/Regular/Millimetre-Regular_web.woff);
font-weight: regular;
}
@font-face {
font-family: Millimetre;
src: url(../webfonts/Bold/Millimetre-Bold_web.woff);
font-weight: bold;
}
body
{margin: 0px;
overflow-x: hidden;
background-color: #8c599c;}
body, a, input
{
font-family: Millimetre;
font-weight: regular;
color: rgba(255,255,255,1);
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.75);
}
input, #headLinks a, #footLinks a, a.button,
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a
{
text-decoration: none;
outline: none;
}
a:hover
{
color: rgba(0,0,0,0.66);
text-shadow: 0px 1px 0px rgba(255,255,255,0.75);
}
a.button:hover
{
color:white;
text-shadow:none;
}
header,
footer
{background-color: #FF8800;
border-bottom: 1px solid rgba(0,0,0,0.75);
box-shadow: 0px 0px 10px black;
font-size: 1.5em;
width: 100%;
height:100px;
margin-top: 1em;
transform: rotate(0.66deg);}
header img
{max-height:80px;
margin-left:10px;
margin-top: 10px;
display: inline-block;}
header ul, footer ul
{list-style-type: none;
display: inline-block;
float: right;
line-height: 50px;}
header ul li
{float: right;
display: block;}
footer ul li
{display:inline-block;}
footer ul
{width: 100%;}
header ul li::after,
footer ul li::after
{width: 1px;
height: 80px;
display: block;
float: right;
content: '';
margin-left: 1em;
margin-top: -20px;
background: linear-gradient(to top, rgba(255,255,255,0.25), rgba(255,255,255,0.0));}
header ul li::before,
footer ul li::before
{width: 1px;
height: 80px;
display: block;
float: right;
content: '';
margin-top: -20px;
margin-right: 1em;
background: linear-gradient(to top, rgba(0,0,0,0.25), rgba(0,0,0,0.0));}
header ul li:first-child::after,
footer ul li:last-child::after
{display: none;}
header ul li:first-child::before,
footer ul li:last-child::before
{display: none;}
header ul li:first-child,
footer ul li:first-child
{margin-right: 1em;}
footer
{transform: rotate(-0.66deg);
clear: both;
text-align: center;}
fieldset
{border: 0px;}
.needJS
{
display: none;
}
.engraved
{
color: white;
text-shadow: 0px -1px 0px rgba(0, 0, 0, 1);
font-family: verdana;
}
.framed
{
border: 1px solid rgba(0, 0, 0, 0.33);
border-radius: 5px;
padding-top: 0.5em;
padding-bottom: 0.5em;
box-shadow: 0px 1px 0px rgba(255,255,255,0.5), inset 0px 1px 0px rgba(255,255,255,1);
background-image: url('../img/background-texture.png');
display: inline-block;
margin: 1em;
}
#explanations
{
padding: 1em;
}
#explanations p
{
margin:1.3em;
}
.cardboard, .error, .success, .info
{
background-opacity: 0.75;
background-image: url('../img/background-texture.png');
}
/* This allow the motion of the button while overing without displacing the content of the page */
.input_wrapper
{
height: 40px;
display: inline-block;
margin-bottom: 1em;
}
input[type=submit], input[type=text], input[type=email], input[type=password], .button
{background-color: #8c599c;
padding: 10px;
border: 0px;
border-radius: 3px;
margin-top:-10px;
color: white;
font-family: sans;
font-weight: bold;
position: relative;
transition: 0.125s ease all;
margin-top: 0px;
box-shadow: inset 0px 1px 0px rgba(255,255,255,0.66), inset 0px -1px 0px rgba(0, 0, 0,0.66), 0px 3px 8px rgba(0,0,0,0.66);}
input[type=submit]:hover, .button:hover
{
margin-top: 2px;
box-shadow: inset 0px 1px 0px rgba(255,255,255,0.66), inset 0px -1px 0px rgba(0, 0, 0,0.66), 0px 0px 5px rgba(0,0,0,0.66);
}
input[type=text], input[type=password], input[type=email] {
box-shadow: inset 0px 1px 0px rgba(0,0,0,0.66), inset 0px -1px 0px rgba(255,255,255,0.66), inset 0px 3px 8px rgba(0,0,0,0.66);}
input[type=checkbox]
{width:15px;
height:15px;
margin-left: 0px;
margin-right: -16px;
opacity:0.0;}
/* The following is a trick to force browser to let me redefine checkbox style */
.checkbox_override
{width: 15px;
height: 15px;
border-radius: 2px;
box-shadow: inset 0px 2px 2px rgba(0, 0, 0, 0.5);
background-color: rgba(0, 0, 0, 0.25);
border-top: 1px solid rgba(0,0,0,0.75);
border-bottom: 1px solid rgba(255,255,255,0.5);
display: inline-block;}
input:hover ~ .checkbox_override
{background-color: rgba(0, 0, 0, 0.125);}
input:checked ~ .checkbox_override {
border-bottom: 1px solid rgba(0,0,0,0.75);
border-top: 1px solid rgba(255,255,255,0.5);
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.5);
background-color: rgba(255, 255, 255, 0.25);
}
::placeholder
{
color:#c6b4cb;
}
p.error, p.success, p.info,
div.error, div.success, div.info
{
width: calc(100% - 20px);
height: auto;
padding: 1em;
opacity: 1;
margin-left: 0px;
line-height: 1.4em;
}
.error {background-color: red;}
.info {background-color: #8c599c;}
.success {background-color: #00c684;}
#zerozozio
{
margin:1em;
text-align:right;
}
#zerozozio a, span
{
padding:0 0.3em;
}

View File

@ -1,160 +0,0 @@
#home
{width: 80%;
margin: auto;
border-radius: 5px;
box-shadow: 0px 0px 5px black;
margin-top: -1.5em;
padding-top: 1.5em;
background-color: #FF8800;
border-bottom: 1px solid rgba(0, 0, 0, 0.75);}
#home h1,
#home h2
{text-align: center;}
#home p
{margin-left:1em;
margin-right: 1em;}
#home form
{border-top: 1px solid rgba(0, 0, 0, 0.5);
border-bottom: 1px solid rgba(0, 0, 0, 0.5);
box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.5);
width: 80%;
margin: auto;
padding-bottom: 1em;
display: block;
padding-top: 1em;
text-align: center;
margin-bottom: 1em;}
#home form input[type=text]
{width: calc(49% - 20px);
margin-right: 1%;}
#home form input[type=submit]
{width: 40%;}
#home form .line
{
margin-top: 1em;
width: 100%;
}
#logo
{width: 50%;
margin: auto;
display: block;}
#home .error, #home .info, #home .success
{
margin: 1em;
width: auto;
border-radius: 5px;
}
/* Sur tablette la troisième colonne vient se placer en dessous de la première ou de la deuxième (la plus courte des deux) */
#triple-column
{
width: 90%;
margin: auto;
margin-top: 1em;
}
.column-1, .column-3, .column-2
{
width: 48%;
float: left;
margin-left:1.5%;
}
.quiz
{
width: 100%;
margin-bottom: 1em;
background-color: #FF8800;
border-radius: 5px;
border-top: 1px solid rgba(255,255,255,0.66);
border-bottom: 1px solid rgba(0,0,0,0.66);
box-shadow: 0px 0px 5px black;
}
.quiz h3
{
text-align: center;
margin: 1em;
}
.quiz p
{
margin: 2em;
text-align: justify;
}
.quiz p:last-child
{
text-align: center;
}
.quiz-image-wrapper
{
width: 95%;
background-size: cover;
border-radius: 5px;
border-top: 1px solid rgba(0,0,0,0.66);
border-bottom: 1px solid rgba(255,255,255,0.66);
box-shadow: inset 0px 5px 5px rgba(0,0,0,0.33);
background-repeat: no-repeat;
margin: auto;
}
.quiz-image-wrapper img
{
opacity: 0;
width: 100%;
}
nav#pagination
{
clear:both;
display:flex;
flex-wrap: wrap;
margin:0.5em;
}
nav#pagination div
{
flex: 0 0 50%;
text-align:center;
}
nav#pagination a
{
background-image: url('../img/background-texture.png');
}
@media screen and (max-width: 520px)
{
/* Sur mobile, les colonnes se placent les unes sous les autres */
#triple-column
{
display: block;
width: 80%;
margin: auto;
margin-top: 1em;
}
.column-1, .column-2, .column-3
{
width: 98%;
float: left;
margin-right: 1%;
}
#home form
{
text-align: center;
}
#home form input[type=text]
{
width: calc(100% - 20px);
margin-right: 0%;
}
#home form input[type=submit]
{
width: 100%;
margin-top: 1em;
display: inline-block;
}
}

View File

@ -1,131 +0,0 @@
#home
{width: 50%;
margin: auto;
border-radius: 5px;
box-shadow: 0px 0px 5px black;
margin-top: -1.5em;
padding-top: 1.5em;
background-color: #FF8800;
border-bottom: 1px solid rgba(0, 0, 0, 0.75);}
#home h1,
#home h2
{text-align: center;}
#home p
{margin-left:1em;
margin-right: 1em;}
#home form
{border-top: 1px solid rgba(0, 0, 0, 0.5);
border-bottom: 1px solid rgba(0, 0, 0, 0.5);
box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.5);
width: 80%;
margin: auto;
padding-bottom: 1em;
display: block;
padding-top: 1em;
text-align: center;
margin-bottom: 1em;}
#home form input[type=text]
{width: calc(66% - 20px);
margin-right: 1%;}
#home form input[type=submit]
{width: 32%;}
#home form input[type=submit]
{width: 32%;}
#home form .line
{
margin-top:0.5em;
width: 100%;
}
#logo
{width: 33%;
margin: auto;
display: block;}
#home .error, #home .info, #home .success
{
margin: 1em;
width: auto;
border-radius: 5px;
}
/* Les colonnes de l'enfer ! */
#triple-column
{
width: 95%;
margin: auto;
margin-top: 1em;
}
.column-1,
.column-2,
.column-3
{
float: left;
width: 32%;
margin-bottom: 1em;
}
.column-1, .column-2
{
margin-right: 1.33%;
}
.quiz
{
width: 100%;
margin-bottom:1em;
background-color: #FF8800;
border-radius: 5px;
border-top: 1px solid rgba(255,255,255,0.66);
border-bottom: 1px solid rgba(0,0,0,0.66);
box-shadow: 0px 0px 5px black;
}
.quiz h3
{
text-align: center;
margin:1em;
}
.quiz p
{
margin: 2em;
text-align: left;
}
.quiz p:last-child
{
text-align: center;
}
.quiz-image-wrapper
{
width: 95%;
background-size: cover;
background-repeat: no-repeat;
border-radius: 5px;
border-top: 1px solid rgba(0,0,0,0.66);
border-bottom: 1px solid rgba(255,255,255,0.66);
box-shadow: inset 0px 5px 5px rgba(0,0,0,0.33);
margin: auto;
}
.quiz-image-wrapper img
{
opacity: 0;
width: 100%;
}
nav#pagination
{
clear:both;
display:flex;
flex-wrap: wrap;
margin:0.5em;
}
nav#pagination div
{
flex: 0 0 50%;
text-align:center;
}

View File

@ -1,28 +0,0 @@
#prompt, #login
{background-color: #FF8800;
width: 75%;
margin: auto;
text-align: center;
border-radius: 5px;
margin-top: -1em;
padding-top:1.5em;
border-bottom: 1px solid rgba(0,0,0,0.8);
box-shadow: 0px 0px 5px rgba(0,0,0,0.75);}
#prompt img
{width: 33%;}
#prompt p
{
background-color: #FF8800;
box-shadow: 0px 0px 5px rgba(0,0,0,0.75);
width: 102%;
margin-left:-1%;
border-radius: 5px;
padding-top: 1em;
padding-bottom: 1em;
font-size:0.8em;
letter-spacing: 0.3em;
border-top: 1px solid rgba(255,255,255,0.5);
border-bottom: 1px solid rgba(0,0,0,0.66);
}

View File

@ -1,27 +0,0 @@
#prompt, #login
{background-color: #FF8800;
width: 50%;
margin: auto;
text-align: center;
border-radius: 5px;
margin-top: -1em;
padding-top:1.5em;
border-bottom: 1px solid rgba(0,0,0,0.8);
box-shadow: 0px 0px 5px rgba(0,0,0,0.75);}
#prompt img
{width: 33%;}
#prompt p, #login h1
{
background-color: #FF8800;
box-shadow: 0px 0px 5px rgba(0,0,0,0.75);
width: 102%;
margin-left:-1%;
border-radius: 5px;
padding-top: 1em;
padding-bottom: 1em;
letter-spacing: 0.5em;
border-top: 1px solid rgba(255,255,255,0.5);
border-bottom: 1px solid rgba(0,0,0,0.66);
}

View File

@ -1,176 +0,0 @@
#prompt
{
width: 80%;
margin: auto;
border-radius: 5px;
box-shadow: 0px 0px 5px black;
margin-top: -1.5em;
padding-top: 1.5em;
background-color: #FF8800;
border-bottom: 1px solid rgba(0, 0, 0, 0.75);
}
#prompt h1
{
text-align: center;
width: 105%;
background-color: #FF8800;
margin-left: -2.5%;
box-shadow: 0px 0px 5px black;
border-radius: 5px;
border-top: 1px solid rgba(255,255,255,0.5);
border-bottom: 1px solid rgba(0,0,0,0.75);
padding-top: 0.25em;
padding-bottom: 0.25em;
}
#prompt img
{
width: 50%;
margin: auto;
display: block;
}
#prompt h2, h3
{
text-align: center;
font-size: 1.4em;
}
#prompt p
{
text-align: center;
line-height: 1.5em;
font-size: 1.2em;
}
span.postscriptum
{
font-style:italic;
font-size:13px;
}
#explanations img
{
width:inherit;
margin: 0;
}
#zerozozio
{
margin:1em;
text-align:right;
}
#zerozozio a, span
{
padding:0 0.3em;
}
/* Sur tablette la troisième colonne vient se placer en dessous de la première ou de la deuxième (la plus courte des deux) */
#triple-column
{
width: 90%;
margin: auto;
margin-top: 1em;
}
.column-1, .column-3, .column-2
{
width: 48%;
float: left;
margin-left:1.5%;
}
.quiz
{
width: 100%;
margin-bottom: 1em;
background-color: #FF8800;
border-radius: 5px;
border-top: 1px solid rgba(255,255,255,0.66);
border-bottom: 1px solid rgba(0,0,0,0.66);
box-shadow: 0px 0px 5px black;
}
.quiz h3
{
text-align: center;
margin: 1em;
}
.quiz p
{
margin: 2em;
text-align: justify;
}
.quiz p:last-child
{
text-align: center;
}
.quiz-image-wrapper
{
width: 95%;
background-size: cover;
border-radius: 5px;
border-top: 1px solid rgba(0,0,0,0.66);
border-bottom: 1px solid rgba(255,255,255,0.66);
box-shadow: inset 0px 5px 5px rgba(0,0,0,0.33);
background-repeat: no-repeat;
margin: auto;
}
.quiz-image-wrapper img
{
opacity: 0;
width: 100%;
}
h3
{
clear:both;
}
nav#pagination, nav#tagsList
{
clear:both;
display:flex;
flex-wrap: wrap;
margin:0.5em;
}
nav#pagination div
{
flex: 0 0 50%;
text-align:center;
}
nav#tagsList div
{
flex: 0 0 33%;
margin: 1em;
text-align:center;
}
@media screen and (max-width: 520px)
{
/* Sur mobile, les colonnes se placent les unes sous les autres */
#triple-column
{
display: block;
width: 80%;
margin: auto;
margin-top: 1em;
}
.column-1, .column-2, .column-3
{
width: 98%;
float: left;
margin-right: 1%;
}
nav#pagination div, nav#tagsList div
{
flex: 0 0 90%;
margin: 1em;
}
#prompt a.button
{
font-size:11px;
}
}

View File

@ -1,152 +0,0 @@
#prompt
{
width: 50%;
margin: auto;
border-radius: 5px;
box-shadow: 0px 0px 5px black;
text-align: center;
margin-top: -1.5em;
padding-top: 1.5em;
background-color: #FF8800;
border-bottom: 1px solid rgba(0, 0, 0, 0.75);
}
#prompt h1
{
text-align: center;
width: 105%;
background-color: #FF8800;
margin-left: -2.5%;
box-shadow: 0px 0px 5px black;
border-radius: 5px;
border-top: 1px solid rgba(255,255,255,0.5);
border-bottom: 1px solid rgba(0,0,0,0.75);
padding-top: 0.25em;
padding-bottom: 0.25em;
}
#prompt img
{
width: 33%;
margin: auto;
display: block;
}
#prompt h3
{
text-align: center;
font-size: 1.4em;
}
#prompt p
{
text-align: center;
line-height: 1.5em;
font-size: 1.2em;
}
span.postscriptum
{
font-style:italic;
font-size:13px;
}
#explanations img
{
width:inherit;
}
#zerozozio
{
margin:1em;
text-align:right;
}
#zerozozio a, span
{
padding:0 0.3em;
}
/* Les colonnes de l'enfer ! */
#triple-column
{
width: 95%;
margin: auto;
margin-top: 1em;
}
.column-1,
.column-2,
.column-3
{
float: left;
width: 32%;
margin-bottom: 1em;
}
.column-1, .column-2
{
margin-right: 1.33%;
}
.quiz
{
width: 100%;
margin-bottom:1em;
background-color: #FF8800;
border-radius: 5px;
border-top: 1px solid rgba(255,255,255,0.66);
border-bottom: 1px solid rgba(0,0,0,0.66);
box-shadow: 0px 0px 5px black;
}
.quiz h3
{
text-align: center;
margin:1em;
}
.quiz p
{
margin: 2em;
text-align: left;
}
.quiz p:last-child
{
text-align: center;
}
.quiz-image-wrapper
{
width: 95%;
background-size: cover;
background-repeat: no-repeat;
border-radius: 5px;
border-top: 1px solid rgba(0,0,0,0.66);
border-bottom: 1px solid rgba(255,255,255,0.66);
box-shadow: inset 0px 5px 5px rgba(0,0,0,0.33);
margin: auto;
}
.quiz-image-wrapper img
{
opacity: 0;
width: 100%;
}
/* pagination + liste de tags */
h3
{
clear:both;
}
nav#pagination, nav#tagsList
{
clear:both;
display:flex;
flex-wrap: wrap;
margin:0.5em;
}
nav#pagination div
{
flex: 0 0 50%;
text-align:center;
}
nav#tagsList div
{
flex: 0 0 15%;
margin: 1em;
text-align:center;
}

View File

@ -1,97 +0,0 @@
#prompt, #login
{background-color: #FF8800;
width: 75%;
margin: auto;
text-align: center;
border-radius: 5px;
margin-top: -1em;
padding-top:1.5em;
border-bottom: 1px solid rgba(0,0,0,0.8);
box-shadow: 0px 0px 5px rgba(0,0,0,0.75);}
#prompt img
{width: 33%;}
#prompt p, #login h1
{background-color: #FF8800;
box-shadow: 0px 0px 5px rgba(0,0,0,0.75);
width: 102%;
margin-left:-1%;
border-radius: 5px;
padding-top: 1em;
padding-bottom: 1em;
letter-spacing: 0.5em;
border-top: 1px solid rgba(255,255,255,0.5);
border-bottom: 1px solid rgba(0,0,0,0.66);}
#login
{margin-top: 1em;
padding-top:0em;
margin-bottom: -2.2em;
padding-bottom: 2.5em;
border-top: 1px solid rgba(255,255,255,0.5);}
#login h1 { font-size:0.9em; }
#login fieldset
{width: 80%;
margin: auto;
text-align: left;}
#login label
{
margin-right: 1%;
text-align: right;
display:inline-block;
}
ul.checkbox_li
{
width:100%;
padding-left: 0 1em;
}
li.checkbox_li
{
width:100%;
}
#login label.check
{
text-align:left;
display:inline-block;
margin-left: 1%;
}
#login ul
{list-style-type: none;
text-align: left;}
#login .framed .engraved
{text-align: left;
margin: 1em;}
#login .error, #login .success, #login .info
{margin: 1em;
width: auto;
border-radius: 5px;}
@media screen and (max-width: 659px)
{
#login fieldset
{width: 90%;
text-align: right;}
/*#login label
{width: auto;
float: left;}*/
#login label, input {width: 90%; }
ul.checkbox_li
{
width:90%;
padding-left: 1em;
}
}

View File

@ -1,71 +0,0 @@
#prompt, #login
{background-color: #FF8800;
width: 50%;
margin: auto;
text-align: center;
border-radius: 5px;
margin-top: -1em;
padding-top:1.5em;
border-bottom: 1px solid rgba(0,0,0,0.8);
box-shadow: 0px 0px 5px rgba(0,0,0,0.75);}
#prompt img
{width: 33%;}
#prompt p, #login h1
{background-color: #FF8800;
box-shadow: 0px 0px 5px rgba(0,0,0,0.75);
width: 102%;
margin-left:-1%;
border-radius: 5px;
padding-top: 1em;
padding-bottom: 1em;
letter-spacing: 0.5em;
border-top: 1px solid rgba(255,255,255,0.5);
border-bottom: 1px solid rgba(0,0,0,0.66);}
#login
{margin-top: 1em;
padding-top:0em;
margin-bottom: -2.2em;
padding-bottom: 2.5em;
border-top: 1px solid rgba(255,255,255,0.5);}
#login fieldset
{width: 80%;
margin: auto;
text-align: left;}
#login label
{width: 49%;
margin-right: 1%;
text-align: right;
display:inline-block;}
ul.checkbox_li
{
width:100%;
text-align:left;
}
#login label.check
{
text-align:left;
display:inline;
margin-left: 1%;
}
#login ul
{list-style-type: none;
text-align: left;}
#signup h2
{margin-bottom: 0px;}
#login .framed .engraved
{text-align: left;
margin: 1em;}
#login #ERROR, #login .error, #login .success, #login .info
{margin: 1em;
width: auto;
border-radius: 5px;}

View File

@ -1,30 +0,0 @@
#menu
{list-style-type: none;
width: 100%;
padding: 0px;
box-shadow: 0px 0px 5px black;
text-align: center;
transform: rotate(-0.5deg);
background-color: #FF8800;}
#menu li
{display: inline-block;
margin: 0.5em;
font-size: 0.9em;
margin-left: 0.5em;
margin-right: 0.5em;}
#menu a
{
text-decoration: none;
}
@media screen and (max-width: 520px) {
#menu
{font-size: 0.8em;}
#menu li
{margin-left: 0.33em;
margin-right: 0.33em;}
}

View File

@ -1,18 +0,0 @@
#menu
{list-style-type: none;
width: 100%;
box-shadow: 0px 0px 5px black;
text-align: center;
transform: rotate(-0.5deg);
background-color: #FF8800;}
#menu li
{display: inline-block;
margin: 0.5em;
margin-left: 1.5em;
margin-right: 1.5em;}
#menu a
{
text-decoration: none;
}

View File

@ -1,90 +0,0 @@
#prompt, #page
{background-color: #FF8800;
width: 75%;
margin: auto;
text-align: center;
border-radius: 5px;
margin-top: -1em;
padding-top:1.5em;
border-bottom: 1px solid rgba(0,0,0,0.8);
box-shadow: 0px 0px 5px rgba(0,0,0,0.75);}
#prompt img
{width: 33%;}
#prompt p, #page h1
{background-color: #FF8800;
box-shadow: 0px 0px 5px rgba(0,0,0,0.75);
width: 102%;
margin-left:-1%;
border-radius: 5px;
padding-top: 1em;
padding-bottom: 1em;
letter-spacing: 0.5em;
border-top: 1px solid rgba(255,255,255,0.5);
border-bottom: 1px solid rgba(0,0,0,0.66);}
#page
{margin-top: 1em;
padding-top:0em;
margin-bottom: -2.2em;
padding-bottom: 2.5em;
border-top: 1px solid rgba(255,255,255,0.5);}
#page h1 { font-size:0.9em; }
#page fieldset
{width: 80%;
margin: auto;
text-align: left;}
#page label
{width: 49%;
margin-right: 1%;
text-align: right;
display:inline-block;}
#page ul
{list-style-type: none;
text-align: left;}
#signup h2
{margin-bottom: 0px;}
#page .framed .engraved
{text-align: left;
margin: 1em;}
#page img { max-width:90% }
#page figure { margin : 1em 0 }
#page #ERROR, #page .error, #page .success, #page .info
{margin: 1em;
width: auto;
border-radius: 5px;}
#page p, li
{
padding: 0 0.5em;
text-align: left;
line-height: 1.5em;
font-size: 1em;
}
@media screen and (max-width: 659px)
{
#page fieldset
{width: 90%;
text-align: right;}
#page label
{width: auto;
float: left;}
#page a.button
{
font-size:12px;
}
}

View File

@ -1,63 +0,0 @@
#prompt, #page
{background-color: #FF8800;
width: 50%;
margin: auto;
text-align: center;
border-radius: 5px;
margin-top: -1em;
padding-top:1.5em;
border-bottom: 1px solid rgba(0,0,0,0.8);
box-shadow: 0px 0px 5px rgba(0,0,0,0.75);}
#prompt img
{width: 33%;}
#prompt p, #page h1
{background-color: #FF8800;
box-shadow: 0px 0px 5px rgba(0,0,0,0.75);
width: 102%;
margin-left:-1%;
border-radius: 5px;
padding-top: 1em;
padding-bottom: 1em;
letter-spacing: 0.5em;
border-top: 1px solid rgba(255,255,255,0.5);
border-bottom: 1px solid rgba(0,0,0,0.66);}
#page
{margin-top: 1em;
padding-top:0em;
margin-bottom: -2.2em;
padding-bottom: 2.5em;
border-top: 1px solid rgba(255,255,255,0.5);}
#page fieldset
{width: 80%;
margin: auto;
text-align: left;}
#page label
{width: 49%;
margin-right: 1%;
text-align: right;
display:inline-block;}
#page ul
{list-style-type: none;
text-align: left;}
#page p, li
{
padding: 0 1em;
text-align: left;
line-height: 1.5em;
font-size: 1em;
}
#page img { max-width:90% }
#page figure { margin : 1em 0 }
#page #ERROR, #page .error, #page .success, #page .info
{margin: 1em;
width: auto;
border-radius: 5px;}

View File

@ -1,180 +0,0 @@
.checkbox_list {font-family: sans;}
#content-picture
{display: none;}
#content-picture div
{width: 100%;
background-size: cover;
border-radius: 5px 5px 0px 0px;
border-top: 1px solid rgba(0,0,0,0.5);
box-shadow: inset 0px 3px 5px rgba(0,0,0,0.25);}
#content-picture p
{text-align: center;
font-family: sans;
background-color: rgba(0, 0, 0, 0.25);
padding: 5px;
border-radius: 0px 0px 5px 5px;
border-top: 1px solid rgba(0,0,0,0.5);
box-shadow: inset 0px 3px 5px rgba(0,0,0,0.33);
border-bottom: 1px solid rgba(255,255,255,0.5);
margin-top: 0px;
margin-bottom: 0px;}
#content-side
{float: right;
margin-top: -0.25em;
width: 95%;
margin-bottom: 100px;}
#content-title h1
{background-color: #FF8800;
padding: 10px;
margin: 0px;
transform: rotate(-0.33deg);
border-radius: 5px 0px 0px 5px;
border-bottom: 1px solid rgba(0,0,0,0.75);
border-left: 1px solid rgba(0,0,0,0.33);
box-shadow: 0px 0px 10px black;
border-top: 1px solid rgba(255,255,255,0.5);
position: relative;
z-index: 2;}
#content-title-corner
{width: 43px;
height:43px;
display:block;
margin-left:-10px;
display :none;
background-image: url('../img/corner.png');
position: relative;
z-index: -1;}
#author-date
{font-size:0.75em;
color: rgba(0,0,0,0.80);
text-shadow: 0px 1px 0px rgba(255,255,255,0.75);}
#required-time-icon
{margin-bottom:-3px;
margin-right: 5px;}
#content
{width: calc(100% - 53px); /* 10 + 10 + 33 */
border-left: 1px solid rgba(0,0,0,0.33);
border-bottom: 1px solid rgba(0,0,0,0.75);
background-color: #FF8800;
margin-top: -5px;
float: right;
font-size: 1.3em;
border-radius: 0px 0px 0px 5px;
box-shadow: 0px 0px 10px black;
text-align: left;
padding-left: 10px;
padding-right: 10px;
}
#content i
{font-size: 0.75em;}
#content-top-decoration
{width: calc(100% - 33px); /* 10 + 10 + 33 */
border-top: 1px solid rgba(255,255,255,0.33);
border-radius: 5px 0px 0px 0px;
box-shadow: 0px 0px 10px black;
height: 2em;
padding-left: 10px;
padding-top:0.5em;
margin-bottom: -5px;
margin-left: 33px;
background-color: #FF8800;}
#tags
{background-color: #FF8800;
transform: rotate(-0.5deg);
box-shadow: 0px 0px 5px black;
border-top: 1px solid rgba(255,255,255,0.5);
border-bottom: 1px solid rgba(0,0,0,0.8);}
#tags ul
{padding-left: 0px;
text-align: center;}
#tags ul li
{display: inline-block;
margin: 0.5em;}
#tags ul li a
{
text-decoration: none;
outline: none;
text-transform: capitalize;
}
#content-side .error, #content-side .info, #content-side .success
{
margin: 1em;
width: auto;
border-radius: 5px;
}
.needJS
{
display:none;
}
/* Bouton permettant de demander l'affichage du quiz */
#showQuestionnaire
{
display:none;
}
/* Boutons inscription/connexion suite réponse quiz */
.subscribeBtns
{
display:none;
}
.quizs, .help
{
display: none;
}
/* affichage de l'image suivant si la réponse est bonne ou mauvaise */
li.checkbox_li span
{
display:none;
}
.isCorrect span.rightResponse, .isNotCorrect span.wrongResponse
{
display:inline;
}
.isCorrect em
{
display:inline;
background-color: #00c684;
background-image: url('../img/background-texture.png');
}
.isNotCorrect em
{
display:inline;
background-color: red;
background-image: url('../img/background-texture.png');
}
li.checkbox_li em
{
margin-left:0.5em;
}
#links, #show, .subscribeBtns p
{
margin: 1.3em;
text-align:center;
}
blockquote.help
{
font-style:italic;
font-size: 0.9em;
margin-left:1em;
}

View File

@ -1,209 +0,0 @@
div#show
{
margin-top: 2em;
}
.checkbox_list {font-family: sans;}
#content-picture
{width: 34%;
transform: rotate(-0.5deg);
margin-left: -1%;
background-color: #FF8800;
margin-top: 1em;
padding:25px;
float: left;
box-shadow: 0px 0px 10px black;
border-radius: 0px 5px 5px 0px;
border-bottom: 1px solid rgba(0,0,0,0.75);
border-top: 1px solid rgba(255,255,255,0.5);}
#content-picture div
{width: 100%;
background-size: cover;
border-radius: 5px 5px 0px 0px;
border-top: 1px solid rgba(0,0,0,0.5);
box-shadow: inset 0px 3px 5px rgba(0,0,0,0.25);}
#content-picture div img
{width: 100%;}
#content-picture p
{text-align: center;
font-family: sans;
background-color: rgba(0, 0, 0, 0.25);
padding: 5px;
border-radius: 0px 0px 5px 5px;
border-top: 1px solid rgba(0,0,0,0.5);
box-shadow: inset 0px 3px 5px rgba(0,0,0,0.33);
border-bottom: 1px solid rgba(255,255,255,0.5);
margin-top: 0px;
margin-bottom: 0px;}
#content-side
{float: right;
width: 60%;
margin-top: -0.25em;
margin-bottom: 100px;}
#content-title h1
{background-color: #FF8800;
padding: 10px;
margin: 0px;
transform: rotate(-0.33deg);
border-radius: 5px 0px 0px 5px;
border-bottom: 1px solid rgba(0,0,0,0.75);
border-left: 1px solid rgba(0,0,0,0.33);
box-shadow: 0px 0px 10px black;
border-top: 1px solid rgba(255,255,255,0.5);
position: relative;
z-index: 2;}
#content-title-corner
{width: 43px;
height:43px;
display:block;
margin-left:-10px;
display :none;
position: relative;
z-index: -1;}
#author-date
{font-size:0.75em;
color: rgba(0,0,0,0.80);
text-shadow: 0px 1px 0px rgba(255,255,255,0.75);}
#required-time-icon
{margin-bottom:-3px;
margin-right: 5px;}
#content
{width: calc(100% - 53px); /* 10 + 10 + 33 */
border-left: 1px solid rgba(0,0,0,0.33);
border-bottom: 1px solid rgba(0,0,0,0.75);
background-color: #FF8800;
margin-top: -5px;
float: right;
font-size: 1.3em;
border-radius: 0px 0px 0px 5px;
box-shadow: 0px 0px 10px black;
text-align: left;
padding-left: 10px;
padding-right: 10px;
}
#content i
{font-size: 0.75em;}
#content ul:last-child
{padding: 0.5em;
display: block;
list-style-type: none;
font-size: 0.75em;}
#content ul:last-child li
{margin: 0.25em;}
#content ul:last-child li::before
{content: '- ';}
#content-top-decoration
{width: calc(100% - 33px); /* 10 + 10 + 33 */
border-top: 1px solid rgba(255,255,255,0.33);
border-radius: 5px 0px 0px 0px;
box-shadow: 0px 0px 10px black;
height: 2em;
padding-left: 10px;
padding-top:0.5em;
margin-bottom: -5px;
margin-left: 33px;
background-color: #FF8800;}
#tags
{background-color: #FF8800;
transform: rotate(-0.5deg);
box-shadow: 0px 0px 5px black;
border-top: 1px solid rgba(255,255,255,0.5);
border-bottom: 1px solid rgba(0,0,0,0.8);}
#tags ul
{padding-left: 0px;
text-align: center;}
#tags ul li
{display: inline-block;
margin: 0.5em;}
#tags ul li a
{
text-decoration: none;
outline: none;
text-transform: capitalize;
}
#content-side .error, #content-side .info, #content-side .success
{
margin: 1em;
width: auto;
border-radius: 5px;
}
.needJS
{
display:none;
}
/* Bouton permettant de demander l'affichage du quiz */
#showQuestionnaire
{
display:none;
}
/* Boutons inscription/connexion suite réponse quiz */
.subscribeBtns
{
display:none;
}
.quizs, .help
{
display: none;
}
/* affichage de l'image suivant si la réponse est bonne ou mauvaise */
li.checkbox_li span
{
display:none;
}
.isCorrect span.rightResponse, .isNotCorrect span.wrongResponse
{
display:inline;
}
.isCorrect em
{
background-color: #00c684;
background-image: url('../img/background-texture.png');
}
.isNotCorrect em
{
background-color: red;
background-image: url('../img/background-texture.png');
}
li.checkbox_li em
{
margin-left:0.5em;
}
#links, #show, .subscribeBtns p
{
margin: 1.3em;
text-align:left;
}
blockquote.help
{
font-style:italic;
font-size: 0.9em;
}
#links, subscribeBtns p
{
margin: 1.5em;
}

View File

@ -1,97 +0,0 @@
#prompt, #signup
{background-color: #FF8800;
width: 75%;
margin: auto;
text-align: center;
border-radius: 5px;
margin-top: -1em;
padding-top:1.5em;
border-bottom: 1px solid rgba(0,0,0,0.8);
box-shadow: 0px 0px 5px rgba(0,0,0,0.75);}
#prompt img
{width: 33%;}
#prompt p, #signup h1
{background-color: #FF8800;
box-shadow: 0px 0px 5px rgba(0,0,0,0.75);
width: 102%;
margin-left:-1%;
border-radius: 5px;
padding-top: 1em;
padding-bottom: 1em;
letter-spacing: 0.5em;
border-top: 1px solid rgba(255,255,255,0.5);
border-bottom: 1px solid rgba(0,0,0,0.66);}
#signup
{margin-top: 1em;
padding-top:0em;
margin-bottom: -2.2em;
padding-bottom: 2.5em;
border-top: 1px solid rgba(255,255,255,0.5);}
#signup h1 { font-size:0.9em; }
#signup ul
{list-style-type: none;
text-align: left;}
#signup h2
{margin-bottom: 0px;}
#signup fieldset
{width: 80%;
margin: auto;
text-align: left;}
#signup label
{margin-right: 1%;
width: 50%;
text-align: right;
display:inline-block;}
ul.checkbox_li
{
width:100%;
padding: 0 1em;
}
li.checkbox_li
{
width:90%;
}
#signup label.check
{
width:100%;
text-align:left;
display:inline-block;
margin-left: 1%;
}
#signup .framed .engraved
{text-align: left;
margin: 1em;}
#signup .error, #signup .info, #signup .success
{margin: 1em;
width: auto;
border-radius: 5px;}
@media screen and (max-width: 659px) {
#signup fieldset
{width: 90%;
text-align: right;}
/*#signup label
{width: auto;
float: left;}*/
ul.checkbox_li
{
width:90%;
padding-left: 1em;
}
#signup label, input {width: 90%; }
}

View File

@ -1,73 +0,0 @@
#prompt, #signup
{background-color: #FF8800;
width: 50%;
margin: auto;
text-align: center;
border-radius: 5px;
margin-top: -1em;
padding-top:1.5em;
border-bottom: 1px solid rgba(0,0,0,0.8);
box-shadow: 0px 0px 5px rgba(0,0,0,0.75);}
#prompt img
{width: 33%;}
#prompt p, #signup h1
{background-color: #FF8800;
box-shadow: 0px 0px 5px rgba(0,0,0,0.75);
width: 102%;
margin-left:-1%;
border-radius: 5px;
padding-top: 1em;
padding-bottom: 1em;
letter-spacing: 0.5em;
border-top: 1px solid rgba(255,255,255,0.5);
border-bottom: 1px solid rgba(0,0,0,0.66);}
#signup
{margin-top: 1em;
padding-top:0em;
margin-bottom: -2.2em;
padding-bottom: 2.5em;
border-top: 1px solid rgba(255,255,255,0.5);}
#signup ul
{list-style-type: none;
text-align: left;}
#signup h2
{margin-bottom: 0px;}
#signup fieldset
{width: 80%;
margin: auto;
text-align: left;}
#signup label
{width: 49%;
margin-right: 1%;
text-align: right;
display:inline-block;}
ul.checkbox_li
{
width:100%;
text-align:left;
}
#signup label.check
{
text-align:left;
display:inline;
margin-left: 1%;
}
#signup .framed .engraved
{text-align: left;
margin: 1em;}
#signup .error, #signup .info, #signup .success
{
margin: 1em;
width: auto;
border-radius: 5px;
}

File diff suppressed because it is too large Load Diff

View File

@ -9,10 +9,7 @@
<script src="/JS/polyfill.app.js" defer></script>
<script src="/JS/subscribeValidation.app.js" defer></script>
<link rel="shortcut icon" href="/img/favicon.ico">
<link rel="stylesheet" href="/themes/wikilerni/css/common.css" media="screen and (min-width: 970px)">
<link rel="stylesheet" href="/themes/wikilerni/css/common-mobile.css" media="screen and (max-width: 969px)">
<link rel="stylesheet" href="/themes/wikilerni/css/links-page.css" media="screen and (min-width: 970px)">
<link rel="stylesheet" href="/themes/wikilerni/css/links-page-mobile.css" media="screen and (max-width: 969px)">
<link rel="stylesheet" href="/themes/wikilerni/css/style.css">
</head>
<body class="cardboard">
@ -24,13 +21,15 @@
<li><a href="/quizs/" id="indexHeadLink" title="Les derniers quizs">Parcourir</a></li>
<li><a href="/connexion.html" id="accountHeadLink">Mon compte</a></li>
<li><a href="/a-propos.html">À propos</a></li>
<li><a href="/" title="Page d'accueil de WikiLerni">Accueil</a></li>
</ul>
</header>
<div id="prompt" class="cardboard">
<a href="/" title="Page d'accueil WikLerni"><img src="/themes/wikilerni/img/wikilerni-purple-2-512.png" alt="Logo WikiLerni" title="W I K I L E R N I" /></a>
<p class="cardboard">Cultivons notre jardin !</p>
<div id="response">Si vous voyez ce message, c'est que votre lien de validation n'est pas valide ou a expiré. Vous pouvez <a href="/connexion.html">en recevoir un nouveau en cliquant ici</a>.</div>
<p>Cultivons notre jardin !</p>
<h1 class="cardboard">Valider la création de votre compte</h1>
<div id="response"><p class="error">Si vous voyez ce message, c'est que votre lien de validation n'est pas valide ou a expiré. Vous pouvez <a href="/connexion.html">en recevoir un nouveau en cliquant ici</a>.</p></div>
</div>
<footer class="cardboard">

View File

@ -3,16 +3,17 @@ module.exports =
headLinks:
[
{ anchor: "Contact", attributes: { href:"/contact.html", rel: "nofollow" } },
{ anchor: "Parcourir", attributes: { href:"/quizs/", id:"indexHeadLink", title:"Les derniers quizs" } },
{ anchor: "Mon compte", attributes: { href:"/connexion.html", id: "accountHeadLink" } },
{ anchor: "À propos", attributes: { href:"/a-propos.html" } }
{ anchor: "Parcourir", attributes: { href:"/quizs/", id:"indexHeadLink", title:"Les dernières mises à jour WikiLerni" } },
{ anchor: "Mon compte", attributes: { href:"/connexion.html", id: "accountHeadLink", title:"Accéder ou créez votre compte WikiLerni" } },
{ anchor: "À propos", attributes: { href:"/a-propos.html", title:"En savoir + sur WikiLerni" } },
{ anchor: "Accueil", attributes: { href:"/", title:"Page d'accueil" } }
],
footLinks:
[
{ anchor: "Blog", attributes: { href:"https://framasphere.org/people/7e54b7a0b53201389eef2a0000053625", title:"Blog WikiLerni sur diaspora*" } },
{ anchor: "Crédits", attributes: { href:"/credits.html" } },
{ anchor: "Blog", attributes: { href:"https://framasphere.org/people/7e54b7a0b53201389eef2a0000053625", title:"Le blog WikiLerni sur diaspora*" } },
{ anchor: "Crédits", attributes: { href:"/credits.html", title:"Qui a créé WikiLerni ? Quels sont vos droits ?" } },
{ anchor: "Mentions légales", attributes: { href:"/mentions-legales.html", rel: "nofollow" } },
{ anchor: "Données personnelles", attributes: { href:"/donnees.html" } },
{ anchor: "Données personnelles", attributes: { href:"/donnees.html", title:"Vos données personnelles sur WikiLerni" } },
{ anchor: "CGV & CGU", attributes: { href:"/CGV-CGU.html", rel: "nofollow" } }
],
maxQuestionnairesSiteHomePage: 3,
@ -39,7 +40,7 @@ module.exports =
homeTitle1: "De nature curieuse ?",
homeP1: "Avec WikiLerni, vous apprenez chaque jour de nouvelles choses.<br>Des articles de Wikipédia sont sélectionnés pour vous et sont suivis d'un quiz vous permettant de tester ce que vous en avez retenu.<br>De jour en jour de nouvelles graines de savoir sont ainsi semées dans votre \"jardin\".",
homeTitle2: "La culture en liberté",
homeP2: "Tout comme sur Wikipédia <span class='postscriptum'>(*)</span>, le logiciel et le contenu partagé sur WikiLerni <a href=\"/credits.html\" title=\"En savoir plus\">sont libres</a>.<br>Sur WikiLerni, pas de publicité, ni de commercialisation de vos données personnelles.<br>Vous pouvez venir y \"cultiver votre jardin\" en toute tranquillité.<br><br><span class='postscriptum'>(*) Bien que partageant ses valeurs, WikiLerni est un projet indépendant de la fondation Wikipédia.</span>",
homeP2: "Tout comme sur Wikipédia <span class='postscriptum'>(*)</span>, le logiciel et le contenu partagé sur WikiLerni <a href=\"/credits.html\" title=\"En savoir plus\">sont libres</a>.<br>Sur WikiLerni, pas de publicité, ni de commercialisation de vos données personnelles.<br>Vous pouvez venir y \"cultiver votre jardin\" en toute tranquillité.",
homeBtnAboutTxt: "En savoir plus sur WikiLerni ?",
homeBtnSubscribeTxt: "Tester WikiLerni gratuitement.",
newQuestionnairesTitle: "Les derniers quizs publiés sur WikiLerni",
@ -47,7 +48,7 @@ module.exports =
explanationTitle: "Vous découvrez WikiLerni ?",
explanationTxt: "Le principe est simple : vous commencez par lire l'article Wikipédia dont le lien vous est proposé.<br>Puis vous afficher le quiz pour vérifier ce que vous avez retenu de votre lecture. Vous obtenez alors votre résultat immédiatement.<br><br>Suivant les questions, une ou plusieurs réponses peuvent être correctes et doivent donc être cochées. <b>C'est toujours le contenu de l'article Wikipédia qui fait foi concernant les \"bonnes\" réponses</b>. Mais les articles de Wikipédia peuvent évoluer, donc n'hésitez pas <a href='/contact.html'>à me signaler une erreur</a>.<br><br>Toutes les réponses se trouvent dans l'article proposé à la lecture. <b>Vous êtes ici pour apprendre de nouvelles choses, mais libre à vous d'essayer d'y répondre immédiatement</b>.<br><br>Quand le sujet s'y prête, ne vous étonnez pas si certaines des réponses proposées peuvent être un peu décalées, absurdes... On peut apprendre avec le sourire, non ? :-)<br><br>Une fois votre résultat obtenu, il vous sera proposé de créer un compte pour le sauvegarder. Ce compte vous permettra de <b>tester de nouveau ce quiz</b> pour vérifier ce que vous en avez retenu plusieurs jours, semaines, mois... Grâce à ce compte, vous pourrez aussi <b>recevoir régulièrement de nouveaux quizs</b> pour continuer à \"cultiver votre jardin\".<br><br>Mais <b>la création de ce compte est facultative</b> et <a href='/quizs/' title='Les derniers quizs publiés'>vous pouvez parcourir WikiLerni librement</a>.",
noJSNotification: "Désolé, mais pour l'instant, l'utilisation de WikiLerni nécessite l'activation du JavaScript.",
newsListTitle: "Les dernières graines de savoir",
tagsListTxt: "Parcourir les rubriques",
newsListTitle: "1 article Wikipédia + 1 quiz = 1 WikiLerni",
mailRecipientTxt: "Message envoyé à :",
twitterAccount: "@WikiLerni",
};

View File

@ -4,19 +4,15 @@ block append scripts
script(src="/JS/polyfill.app.js" defer)
script(src="/JS/index.app.js" defer)
block append css
link(rel="stylesheet" href="/themes/wikilerni/css/list.css" media="screen and (min-width: 751px)")
link(rel="stylesheet" href="/themes/wikilerni/css/list-mobile.css" media="screen and (max-width: 750px)")
block content
div(id="prompt" class="cardboard")
div(id="home" class="cardboard")
p
img(id="logo" src="/themes/wikilerni/img/wikilerni-purple-2-512.png" alt="Logo WikiLerni")
h1(class="cardboard") #{config.siteName}
h2 #{configTpl.siteSlogan}
div#explanations(class="engraved framed")
div(class="engraved framed")
h3 #{configTpl.homeTitle1}
p !{configTpl.homeP1}
h3 #{configTpl.homeTitle2}

View File

@ -2,17 +2,21 @@
div(id="triple-column")
-
// je commence par répartir les éléments entre les 3 colonnes
let questionnaires_col=[[],[],[]], col=0, tot=0;
for(i in questionnaires)
let questionnaires_col=[[],[],[]], col=0, tot=0, nbMaxQuestionnairesCol;
// nombre d'élements par colonne :
if(questionnaires.length < nbQuestionnairesList)
nbMaxQuestionnairesCol=questionnaires.length;
else
nbMaxQuestionnairesCol=nbQuestionnairesList;
for(let i in questionnaires)
{
if(tot < nbQuestionnairesList)
{
questionnaires_col[col].push(questionnaires[i]);
if(col===0 || (col===1))
col++;
else
col=0;
tot++;
if((col===0 && tot >= (nbMaxQuestionnairesCol/3)) || (col===1 && tot >= (nbMaxQuestionnairesCol/3*2)))
col++;
}
}
let rotation=0, lastCar;

View File

@ -16,8 +16,7 @@ html(lang=(pageLang) ? pageLang : config.adminLang)
base(href=config.siteUrl)
// Version lisible des scripts : https://gitlab.com/lefablab/wikilerni/-/tree/master/front/src
block scripts
link(rel="stylesheet" href="/themes/wikilerni/css/common.css" media="screen and (min-width: 871px)")
link(rel="stylesheet" href="/themes/wikilerni/css/common-mobile.css" media="screen and (max-width: 870px)")
link(rel="stylesheet" href="/themes/wikilerni/css/style.css")
block css
link(rel="shortcut icon" href="/img/favicon.ico")
link(rel="apple-touch-icon" sizes="57x57" href="/img/apple-icon-57x57.png")
@ -35,8 +34,8 @@ html(lang=(pageLang) ? pageLang : config.adminLang)
ul(id="headLinks")
- const nbItemHead=configTpl.headLinks.length; const lang=config.adminLang+"";
for item in configTpl.headLinks
li(class="pure-menu-item pure-u-1 pure-u-lg-1-"+nbItemHead)
a(href="/"+item.url class="pure-menu-link")&attributes(item.attributes) #{item.anchor}
li
a(href="/"+item.url)&attributes(item.attributes) #{item.anchor}
block content

View File

@ -4,10 +4,6 @@ block append scripts
script(src="/JS/polyfill.app.js" defer)
script(src="/JS/index.app.js" defer)
block append css
link(rel="stylesheet" href="/themes/wikilerni/css/list.css" media="screen and (min-width: 751px)")
link(rel="stylesheet" href="/themes/wikilerni/css/list-mobile.css" media="screen and (max-width: 750px)")
block content
div(id="prompt" class="cardboard")
@ -15,12 +11,13 @@ block content
img(id="logo" src="/themes/wikilerni/img/wikilerni-purple-2-512.png" alt="Logo WikiLerni")
h1(class="cardboard") #{configTpl.siteSlogan}
p #{configTpl.newsListTitle}
p
a(href="/"+configTpl.aboutPage class="button cardboard" title=configTpl.homeBtnAboutTxt) #{configTpl.homeBtnAboutTxt}
- nbQuestionnairesList=configTpl.maxQuestionnairesByPage;
include includes/listing-questionnaires.pug
h3 #{configTpl.tagsListTxt}
nav(id="tagsList" class="cardboard")
nav(id="tagsList")
for tag in tags
div
a(href="/quizs/"+tag.slug+".html" class="button") #{tag.name}

View File

@ -4,10 +4,6 @@ block append scripts
script(src="/JS/polyfill.app.js" defer)
script(src="/JS/questionnaire.app.js" defer)
block append css
link(rel="stylesheet" href="/themes/wikilerni/css/quiz.css" media="screen and (min-width: 871px)")
link(rel="stylesheet" href="/themes/wikilerni/css/quiz-mobile.css" media="screen and (max-width: 870px)")
block content
div(id="tags" class="cardboard")
@ -44,17 +40,21 @@ block content
h1(class="cardboard")
img(id="required-time-icon" src="/themes/wikilerni/img/time-required-"+questionnaire.Questionnaire.estimatedTime+".png" title=txtQuestionnaire.estimatedTime+" "+txtQuestionnaire.estimatedTimeOption[questionnaire.Questionnaire.estimatedTime])
span #{questionnaire.Questionnaire.title}
if(questionnaire.Illustrations!=undefined && questionnaire.Illustrations.length!==0)
a(href="/img/quizs/"+questionnaire.Illustrations[0].url target="_blank" rel="noopener")
img(src="/img/quizs/min/"+questionnaire.Illustrations[0].url class="thumb")&attributes(imgAttributes)
div(id="content-title-corner")
div(id="content" class="cardboard")
p(id="author-date") #{txtQuestionnaire.publishedBy} #{author}#{txtQuestionnaire.publishedAt} #{publishedAtTxt}. #{txtQuestionnaire.lastUpdated}#{updatedAtTxt}.
//- Important : ici, on garde volontairement le html, car cela est accepté pour l'introduction
if(questionnaire.Questionnaire.introduction)
div !{questionnaire.Questionnaire.introduction}
div#introduction !{questionnaire.Questionnaire.introduction}
div#links
for link in questionnaire.Links
p
a(href=link.url class="button cardboard" target="_blank" rel="noopener" title=link.anchor+" ("+txtGeneral.alertNewWindow+")") #{link.anchor}
div#show
p
a(class="button cardboard" href="#questionnaire" id="showQuestionnaire" title=txtQuestionnaire.btnShowQuestionnaire) #{txtQuestionnaire.btnShowQuestionnaire}
noscript
@ -73,7 +73,7 @@ block content
p(id="question_"+question.Question.id) #{question.Question.text}
if(question.Question.explanation)
blockquote(class="help" id="help_"+question.Question.id cite=questionnaire.Links[0].url) #{txtQuestionnaire.explanationBeforeTxt} #{question.Question.explanation}
ul(class="checkbox_list")
ul(class="checkbox_li")
for reponse in question.Choices
li(class="checkbox_li")
label(class="check" for="response_"+reponse.id)
@ -96,7 +96,7 @@ block content
img(src="/themes/wikilerni/img/diaspora.png" alt=txtQuestionnaire.btnShareQuizTxt+" diaspora*")
a(href="https://www.facebook.com/sharer.php?u="+linkCanonical rel="nofollow noopener" title=txtQuestionnaire.btnShareQuizTxt+" facebook ("+txtGeneral.alertNewWindow+")" target="_blank")
img(src="/themes/wikilerni/img/facebook.png" alt=txtQuestionnaire.btnShareQuizTxt+" facebook")
a(href="https://twitter.com/intent/tweet?url="+linkCanonical+"&text="+questionnaire.Questionnaire.title rel="nofollow noopener" title=txtQuestionnaire.btnShareQuizTxt+" twitter ("+txtGeneral.alertNewWindow+")")
a(href="https://twitter.com/intent/tweet?url="+linkCanonical+"&text="+questionnaire.Questionnaire.title+" via "+configTpl.twitterAccount rel="nofollow noopener" title=txtQuestionnaire.btnShareQuizTxt+" twitter ("+txtGeneral.alertNewWindow+")" target="_blank")
img(src="/themes/wikilerni/img/twitter.png" alt=txtQuestionnaire.btnShareQuizTxt+" twitter")
div#explanations(class="engraved framed")

View File

@ -4,10 +4,6 @@ block append scripts
script(src="/JS/polyfill.app.js" defer)
script(src="/JS/index.app.js" defer)
block append css
link(rel="stylesheet" href="/themes/wikilerni/css/list.css" media="screen and (min-width: 751px)")
link(rel="stylesheet" href="/themes/wikilerni/css/list-mobile.css" media="screen and (max-width: 750px)")
block content
div(id="prompt" class="cardboard")