WikiLerni/front/public/themes/default/inscription.html

115 lines
6.2 KiB
HTML

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Formulaire d'inscription à WikiLerni.">
<title>S'inscrire à WikiLerni</title>
<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/default/CSS/pure-min.css">
<link rel="stylesheet" href="/themes/default/CSS/grids-responsive-min.css">
<link rel="stylesheet" href="/themes/default/CSS/wikilerni.css">
<link rel="canonical" href="https://www.wililerni.com/inscription.html">
</head>
<body>
<header class="pure-g menu">
<div class="pure-u-1 pure-u-lg-1-8 menu-heading">
<a class="pure-menu-heading" href="/">WikiLerni</a>
</div>
<div class="pure-u-1 pure-u-lg-7-8">
<ul class="pure-g">
<li class="pure-menu-item pure-u-1 pure-u-lg-1-4">
<a class="pure-menu-link" href="/">Accueil</a>
</li>
<li class="pure-menu-item pure-u-1 pure-u-lg-1-4">
<a class="pure-menu-link" href="/connexion.html" id="accountHeadLink">Mon compte</a>
</li>
<li class="pure-menu-item pure-u-1 pure-u-lg-1-4">
<a class="pure-menu-link" href="/a-propos.html">À propos</a>
</li>
<li class="pure-menu-item pure-u-1 pure-u-lg-1-4">
<a class="pure-menu-link" href="/contact.html">Contact</a>
</li>
</ul>
</div>
</header>
<section id="main-content">
<header id="main-header">
<h1>WikiLerni</h1>
<p>Cultivons notre jardin !</p>
</header>
<div class="content">
<h2 class="content-head is-center">Créer votre compte WikiLerni</h2>
<div class="pure-g">
<div class="l-box-lrg pure-u-1">
<noscript>Désolé, mais pour l'instant, l'utilisation de WikiLerni nécessite l'activation du JavaScript. Nous travaillons à changer cela.</noscript>
<form class="pure-form pure-form-aligned needJS" id="subscription" method="POST">
<fieldset>
<div class="pure-control-group">
<label for="name">Nom ou pseudo</label>
<input id="name" type="text" name="name" placeholder="Pseudo de votre choix">
<span class="pure-form-message-inline"></span>
</div>
<div class="pure-control-group">
<label for="email">Email</label>
<input id="email" type="email" name="email" placeholder="Adresse e-mail">
<span class="pure-form-message-inline" id="emailMessage"></span>
</div>
<div class="pure-control-group">
<label for="password">Mot de passe</label>
<input id="password" type="password" name="password" placeholder="Mot de passe de votre choix">
<span class="pure-form-message-inline" id="passwordMessage"><i class="information">Votre mot de passe doit compter au moins 8 caractères. <a href="#password" id="getPassword">Générer un mot de passe</a>.</i></span>
</div>
<div class="pure-control-group">
<label for="codeGodfather">Code parrainage</label>
<input id="codeGodfather" name="codeGodfather" placeholder="Code ou email de votre parrain.">
<span class="pure-form-message-inline" id="codeGodfatherMessage"><i class="information">Facultatif.</i></span>
</div>
<div class="pure-controls">
<label for="cguOk" class="pure-checkbox">
<input type="checkbox" id="cguOk" name="cguOk" value="true" /> J'accepte <a href="/cgu.html">les Conditions Générales d'Utilisation du site</a> (requis).
</label>
<label for="newsletterOk" class="pure-checkbox">
<input type="checkbox" id="newsletterOk" name="newsletterOk" value="true" /> J'accepte de recevoir les nouveaux quizs WikiLerni par email (facultatif).
</label>
<button type="submit" class="pure-button pure-button-primary" id="submitDatas">Valider</button>
</div>
</fieldset>
</form>
<div id="response"></div>
</div>
<div class="l-box-lrg pure-u-1">
<h4>Pourquoi s'inscrire ?</h4>
<p>Cela prend quelques instants et n'engage à rien, car c'est totalement gratuit les quinze premiers jours. Libre à vous ensuite de vous abonner pour quelques euros par an. Sinon, il vous suffira de ne pas donner suite à la notification vous proposant de vous abonner.</p>
</div>
</div>
</div>
</section>
<footer class="footer l-box is-center">
<ul class="pure-g">
<li class="pure-u-1 pure-u-lg-1-5">
<a href="/mentions-legales.html">Crédits</a>
</li>
<li class="pure-u-1 pure-u-lg-1-5">
<a href="/mentions-legales.html">Mentions légales</a>
</li>
<li class="pure-u-1 pure-u-lg-1-5">
<a href="/donnees.html">Données personnelles</a>
</li>
<li class="pure-u-1 pure-u-lg-1-5">
<a href="/cgu.html">C.G.U.</a>
</li>
<li class="pure-u-1 pure-u-lg-1-5">
<a href="/cgv.html">C.G.V.</a>
</li>
</ul>
</footer>
</body>
</html>