Browse Source

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

master
Fabrice PENHOËT 1 year ago
parent
commit
ea70bebf16
  1. 17
      front/public/404.html
  2. 55
      front/public/a-propos.html
  3. 18
      front/public/accueil.html
  4. 8
      front/public/aurevoir.html
  5. 62
      front/public/compte.html
  6. 23
      front/public/connexion.html
  7. 18
      front/public/contact.html
  8. 8
      front/public/credits.html
  9. 47
      front/public/donnees.html
  10. BIN
      front/public/img/e-mail.png
  11. 34
      front/public/inscription.html
  12. 6
      front/public/login.html
  13. 10
      front/public/merci.html
  14. 13
      front/public/newlogin.html
  15. 10
      front/public/sortie.html
  16. 13
      front/public/stop-mail.html
  17. 67
      front/public/themes/wikilerni/css/account-mobile.css
  18. 49
      front/public/themes/wikilerni/css/account.css
  19. 314
      front/public/themes/wikilerni/css/common-mobile.css
  20. 252
      front/public/themes/wikilerni/css/common.css
  21. 160
      front/public/themes/wikilerni/css/home-mobile.css
  22. 131
      front/public/themes/wikilerni/css/home.css
  23. 28
      front/public/themes/wikilerni/css/links-page-mobile.css
  24. 27
      front/public/themes/wikilerni/css/links-page.css
  25. 176
      front/public/themes/wikilerni/css/list-mobile.css
  26. 152
      front/public/themes/wikilerni/css/list.css
  27. 97
      front/public/themes/wikilerni/css/login-mobile.css
  28. 71
      front/public/themes/wikilerni/css/login.css
  29. 30
      front/public/themes/wikilerni/css/menu-mobile.css
  30. 18
      front/public/themes/wikilerni/css/menu.css
  31. 90
      front/public/themes/wikilerni/css/pages-mobile.css
  32. 63
      front/public/themes/wikilerni/css/pages.css
  33. 180
      front/public/themes/wikilerni/css/quiz-mobile.css
  34. 209
      front/public/themes/wikilerni/css/quiz.css
  35. 97
      front/public/themes/wikilerni/css/signup-mobile.css
  36. 73
      front/public/themes/wikilerni/css/signup.css
  37. 1385
      front/public/themes/wikilerni/css/style.css
  38. 11
      front/public/validation.html
  39. 19
      views/wikilerni/config/fr.js
  40. 8
      views/wikilerni/home.pug
  41. 16
      views/wikilerni/includes/listing-questionnaires.pug
  42. 7
      views/wikilerni/layout.pug
  43. 9
      views/wikilerni/newQuestionnaires.pug
  44. 16
      views/wikilerni/quiz.pug
  45. 4
      views/wikilerni/tag.pug

17
front/public/404.html

@ -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>

55
front/public/a-propos.html

@ -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>

18
front/public/accueil.html

@ -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>

8
front/public/aurevoir.html

@ -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>

62
front/public/compte.html

@ -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,44 +70,46 @@
<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">
<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>
<li class="checkbox_li">
<label for="abo24" class="check"><input type="checkbox" id="abo24" name="abo24" value="true" /><div class="checkbox_override"></div> J'accepte de payer <b>2 € TTC/mois</b>, soit 24 € TTC.</label>
</li>
<li class="checkbox_li">
<label for="abo60" class="check"><input type="checkbox" id="abo60" name="abo60" value="true" /><div class="checkbox_override"></div> J'accepte de payer <b>5 € TTC/mois</b>, soit 60 € TTC.</label>
</li>
<li class="checkbox_li">
<label for="abo120" class="check"><input type="checkbox" id="abo120" name="abo120" value="true" /><div class="checkbox_override"></div> J'accepte de payer <b>10 € TTC/mois</b>, soit 120 € TTC.</label>
</li>
<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>
<li class="checkbox_li">
<label for="abo24" class="check"><input type="checkbox" id="abo24" name="abo24" value="true" /><div class="checkbox_override"></div> J'accepte de payer <b>2 € TTC/mois</b>, soit 24 € TTC.</label>
</li>
<li class="checkbox_li">
<label for="abo60" class="check"><input type="checkbox" id="abo60" name="abo60" value="true" /><div class="checkbox_override"></div> J'accepte de payer <b>5 € TTC/mois</b>, soit 60 € TTC.</label>
</li>
<li class="checkbox_li">
<label for="abo120" class="check"><input type="checkbox" id="abo120" name="abo120" value="true" /><div class="checkbox_override"></div> J'accepte de payer <b>10 € TTC/mois</b>, soit 120 € TTC.</label>
</li>
<li class="checkbox_li">
<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>
<li class="checkbox_li">
<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">

23
front/public/connexion.html

@ -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>

18
front/public/contact.html

@ -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">

8
front/public/credits.html

@ -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">

47
front/public/donnees.html

@ -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 d’enregistrer 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 d’enregistrer 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

Binary file not shown.

After

Width:  |  Height:  |  Size: 28 KiB

34
front/public/inscription.html

@ -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>

6
front/public/login.html

@ -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>

10
front/public/merci.html

@ -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>

13
front/public/newlogin.html

@ -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,15 +21,17 @@
<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">
<ul id="footLinks">
<li><a href="https://framasphere.org/people/7e54b7a0b53201389eef2a0000053625" title="Blog WikiLerni sur diaspora*">Blog</a></li>

10
front/public/sortie.html

@ -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,16 +21,17 @@
<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>
<footer class="cardboard">
<ul id="footLinks">
<li><a href="https://framasphere.org/people/7e54b7a0b53201389eef2a0000053625" title="Blog WikiLerni sur diaspora*">Blog</a></li>

13
front/public/stop-mail.html

@ -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,15 +21,17 @@
<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">
<ul id="footLinks">
<li><a href="https://framasphere.org/people/7e54b7a0b53201389eef2a0000053625" title="Blog WikiLerni sur diaspora*">Blog</a></li>

67
front/public/themes/wikilerni/css/account-mobile.css

@ -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;}
}

49
front/public/themes/wikilerni/css/account.css

@ -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;
}

314
front/public/themes/wikilerni/css/common-mobile.css

@ -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;