Change engine template to pugjs

parent 01b3d33c
......@@ -13,7 +13,7 @@
"license": "GPL-3.0",
"dependencies": {
"canvas": "2.0.0-alpha.5",
"ejs": "^2.5.7",
"express": "^4.16.1"
"express": "^4.16.1",
"pug": "^2.0.0-rc.4"
}
}
......@@ -10,7 +10,7 @@ const config = require('./config.json');
const enLocale = require('./locale/en.json');
app.set('x-powered-by', false);
app.set('view engine', 'ejs');
app.set('view engine', 'pug');
app.use(express.static('./static'));
// {name: filepath}
......
......@@ -95,6 +95,7 @@ a {
}
.white-button, .blue-button {
margin-left: 5px;
display: inline-block;
cursor: pointer;
height: 50px;
......
<!doctype html>
<html lang="fr">
<head prefix="og: http://ogp.me/ns#">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="twitter:card" content="summary_large_image" />
<meta property="og:title" content="Soutenez La Quadrature du Net !" />
<meta property="og:description" content="Soutenez La Quadrature du Net !" />
<meta property="og:url" content="<%= protocol %>://<%= host %>/<%= subdir %>?<%= imageParams %>" />
<meta property="og:image" content="<%= protocol %>://<%= host %>/<%= subdir %>/generate.png?<%= imageParams %>" />
<meta property="og:image:width" content="600" />
<meta property="og:image:height" content="413" />
<meta property="og:type" content="website" />
<link rel="stylesheet" href="./font-awesome.min.css" />
<link rel="stylesheet" href="./style.css" />
<title><%= _('Soutenez La Quadrature du Net !') %></title>
</head>
<body>
<form action="./generate.png" target="_blank">
<nav>
<a><img src="./imgs/logo_lqdn.svg" alt="LQDN" /></a>
<a class="fa fa-eyedropper" href="#step1"></a>
<a class="fa fa-i-cursor" href="#step2"></a>
<a class="fa fa-font" href="#step3"></a>
<a class="fa fa-pencil" href="#step4"></a>
<a class="fa fa-cogs" href="#step5"></a>
</nav>
<aside id="inputs">
<div id="step1">
<div class="randomize-button-container">
<button type="submit" name="target" value="randomize" class="randomize white-button"><%= _('CHOISIR AU HASARD') %> <span class="fa fa-random"></span></button>
</div>
<h2 class="title-small"><%= _('Choisissez 2 couleurs') %></h2>
<h2 class="title-big"><%= _('Choisissez la couleur de fond') %></h2>
<div class="colorpicker">
<input type="radio" name="bg-color" value="#f54358" id="bg-red" checked/>
<label for="bg-red">
<span style="background-color: #f54358"></span>
</label>
<input type="radio" name="bg-color" value="#ee0088" id="bg-pink" />
<label for="bg-pink">
<span style="background-color: #ee0088"></span>
</label>
<input type="radio" name="bg-color" value="#ff9146" id="bg-orange" />
<label for="bg-orange">
<span style="background-color: #ff9146"></span>
</label>
<input type="radio" name="bg-color" value="#ffd201" id="bg-yellow" />
<label for="bg-yellow">
<span style="background-color: #ffd201"></span>
</label>
<input type="radio" name="bg-color" value="#39d0b7" id="bg-teal" />
<label for="bg-teal">
<span style="background-color: #39d0b7"></span>
</label>
<input type="radio" name="bg-color" value="#2f5189" id="bg-blue" />
<label for="bg-blue">
<span style="background-color: #2f5189"></span>
</label>
<input type="radio" name="bg-color" value="#000" id="bg-black" />
<label for="bg-black">
<span style="background-color: #000"></span>
</label>
</div>
<h2 class="title-big"><%= _('Choisissez la couleur du texte') %></h2>
<div class="colorpicker">
<input type="radio" name="fg-color" value="#f54358" id="fg-red" />
<label for="fg-red">
<span style="background-color: #f54358"></span>
</label>
<input type="radio" name="fg-color" value="#ee0088" id="fg-pink" />
<label for="fg-pink">
<span style="background-color: #ee0088"></span>
</label>
<input type="radio" name="fg-color" value="#ff9146" id="fg-orange" />
<label for="fg-orange">
<span style="background-color: #ff9146"></span>
</label>
<input type="radio" name="fg-color" value="#ffd201" id="fg-yellow" checked/>
<label for="fg-yellow">
<span style="background-color: #ffd201"></span>
</label>
<input type="radio" name="fg-color" value="#39d0b7" id="fg-teal" />
<label for="fg-teal">
<span style="background-color: #39d0b7"></span>
</label>
<input type="radio" name="fg-color" value="#2f5189" id="fg-blue" />
<label for="fg-blue">
<span style="background-color: #2f5189"></span>
</label>
<input type="radio" name="fg-color" value="#000" id="fg-black" />
<label for="fg-black">
<span style="background-color: #000"></span>
</label>
<input type="radio" name="fg-color" value="#fff" id="fg-white" />
<label for="fg-white">
<span style="background-color: #fff"></span>
</label>
</div>
<div class="navButtons">
<a href="#step2" class="blue-button"><%= _('ÉTAPE SUIVANTE') %> &rsaquo;</a>
</div>
</div>
<div id="step2">
<div class="randomize-button-container">
<button type="submit" name="target" value="randomize" class="randomize white-button"><%= _('CHOISIR AU HASARD') %> <span class="fa fa-random"></span></button>
</div>
<h2><%= _('Remplissez le texte à trou') %></h2>
<textarea placeholder="<%= _('(90 caractères maximum)') %>" rows="8" id="step2value" name="text" maxlength="90"></textarea>
<div class="navButtons">
<a href="#step1" class="white-button">&lsaquo;</a>
<a href="#step3" class="blue-button"><%= _('ÉTAPE SUIVANTE') %> &rsaquo;</a>
</div>
</div>
<div id="step3">
<div class="randomize-button-container">
<button type="submit" name="target" value="randomize" class="randomize white-button"><%= _('CHOISIR AU HASARD') %> <span class="fa fa-random"></span></button>
</div>
<h2><%= _('Choisissez votre police') %></h2>
<div class="fontpicker">
<input type="radio" id="radio-font-1" name="font" value="bilbo-inc" /><label for="radio-font-1" style="font-family: bilbo-inc">Bilbo inc</label>
<input type="radio" id="radio-font-2" name="font" value="bluu-next" checked/><label for="radio-font-2" style="font-family: bluu-next">Bluu Next</label>
<input type="radio" id="radio-font-4" name="font" value="combat" /><label for="radio-font-4" style="font-family: combat">Combat</label>
<input type="radio" id="radio-font-5" name="font" value="gulax" /><label for="radio-font-5" style="font-family: gulax">Gulax</label>
<input type="radio" id="radio-font-6" name="font" value="lineal" checked/><label for="radio-font-6" style="font-family: lineal">Lineal</label>
<input type="radio" id="radio-font-7" name="font" value="resistance" /><label for="radio-font-7" style="font-family: resistance">Resistance</label>
<input type="radio" id="radio-font-8" name="font" value="savate" /><label for="radio-font-8" style="font-family: savate">Savate</label>
<input type="radio" id="radio-font-9" name="font" value="solid-mirage" /><label for="radio-font-9" style="font-family: solid-mirage">Solid Mirage</label>
<input type="radio" id="radio-font-10" name="font" value="steps-mono" /><label for="radio-font-10" style="font-family: steps-mono">Steps-Mono</label>
<input type="radio" id="radio-font-11" name="font" value="terminal" /><label for="radio-font-11" style="font-family: terminal">Terminal</label>
</div>
<div class="navButtons">
<a href="#step2" class="white-button">&lsaquo;</a>
<a href="#step4" class="blue-button"><%= _('ÉTAPE SUIVANTE') %> &rsaquo;</a>
</div>
</div>
<div id="step4">
<div class="randomize-button-container">
<button type="submit" name="target" value="randomize" class="randomize white-button"><%= _('CHOISIR AU HASARD') %> <span class="fa fa-random"></span></button>
</div>
<h2><%= _('Choisissez votre icône') %></h2>
<div class="iconpicker">
<input type="radio" id="radio-icon-1" name="icon" value="1" checked/>
<label for="radio-icon-1"></label>
<input type="radio" id="radio-icon-2" name="icon" value="2" />
<label for="radio-icon-2" style="background-position: 33% 0"></label>
<input type="radio" id="radio-icon-3" name="icon" value="3" />
<label for="radio-icon-3" style="background-position: 67% 0"></label>
<input type="radio" id="radio-icon-4" name="icon" value="4" />
<label for="radio-icon-4" style="background-position: 100% 0"></label>
<input type="radio" id="radio-icon-5" name="icon" value="5" />
<label for="radio-icon-5" style="background-position: 0 12.5%"></label>
<input type="radio" id="radio-icon-6" name="icon" value="6" />
<label for="radio-icon-6" style="background-position: 33% 12.5%"></label>
<input type="radio" id="radio-icon-7" name="icon" value="7" />
<label for="radio-icon-7" style="background-position: 67% 12.5%"></label>
<input type="radio" id="radio-icon-8" name="icon" value="8" />
<label for="radio-icon-8" style="background-position: 100% 12.5%"></label>
<input type="radio" id="radio-icon-9" name="icon" value="9" />
<label for="radio-icon-9" style="background-position: 0 24%"></label>
<input type="radio" id="radio-icon-10" name="icon" value="10" />
<label for="radio-icon-10" style="background-position: 33% 24%"></label>
<input type="radio" id="radio-icon-11" name="icon" value="11" />
<label for="radio-icon-11" style="background-position: 67% 24%"></label>
<input type="radio" id="radio-icon-12" name="icon" value="12" />
<label for="radio-icon-12" style="background-position: 100% 24%"></label>
<input type="radio" id="radio-icon-13" name="icon" value="13"/>
<label for="radio-icon-13" style="background-position: 0 37.5%"></label>
<input type="radio" id="radio-icon-14" name="icon" value="14"/>
<label for="radio-icon-14" style="background-position: 33% 37.5%"></label>
<input type="radio" id="radio-icon-15" name="icon" value="15"/>
<label for="radio-icon-15" style="background-position: 67% 37.5%"></label>
<input type="radio" id="radio-icon-16" name="icon" value="16"/>
<label for="radio-icon-16" style="background-position: 100% 37.5%"></label>
<input type="radio" id="radio-icon-17" name="icon" value="17"/>
<label for="radio-icon-17" style="background-position: 0 50%"></label>
<input type="radio" id="radio-icon-18" name="icon" value="18"/>
<label for="radio-icon-18" style="background-position: 33% 50%"></label>
<input type="radio" id="radio-icon-19" name="icon" value="19"/>
<label for="radio-icon-19" style="background-position: 67% 50%"></label>
<input type="radio" id="radio-icon-20" name="icon" value="20"/>
<label for="radio-icon-20" style="background-position: 100% 50%"></label>
<input type="radio" id="radio-icon-21" name="icon" value="21"/>
<label for="radio-icon-21" style="background-position: 0 61%"></label>
<input type="radio" id="radio-icon-22" name="icon" value="22"/>
<label for="radio-icon-22" style="background-position: 33% 61%"></label>
<input type="radio" id="radio-icon-23" name="icon" value="23"/>
<label for="radio-icon-23" style="background-position: 67% 61%"></label>
<input type="radio" id="radio-icon-24" name="icon" value="24"/>
<label for="radio-icon-24" style="background-position: 100% 61%"></label>
<input type="radio" id="radio-icon-25" name="icon" value="25"/>
<label for="radio-icon-25" style="background-position: 0 73%"></label>
<input type="radio" id="radio-icon-26" name="icon" value="26"/>
<label for="radio-icon-26" style="background-position: 33% 73%"></label>
<input type="radio" id="radio-icon-27" name="icon" value="27"/>
<label for="radio-icon-27" style="background-position: 67% 73%"></label>
<input type="radio" id="radio-icon-28" name="icon" value="28"/>
<label for="radio-icon-28" style="background-position: 100% 73%"></label>
<input type="radio" id="radio-icon-29" name="icon" value="29"/>
<label for="radio-icon-29" style="background-position: 0 87.5%"></label>
<input type="radio" id="radio-icon-30" name="icon" value="30"/>
<label for="radio-icon-30" style="background-position: 33% 87.5%"></label>
<input type="radio" id="radio-icon-31" name="icon" value="31"/>
<label for="radio-icon-31" style="background-position: 67% 87.5%"></label>
<input type="radio" id="radio-icon-32" name="icon" value="32"/>
<label for="radio-icon-32" style="background-position: 100% 87.5%"></label>
<input type="radio" id="radio-icon-33" name="icon" value="33"/>
<label for="radio-icon-33" style="background-position: -1% 100%"></label>
<input type="radio" id="radio-icon-34" name="icon" value="34"/>
<label for="radio-icon-34" style="background-position: 32% 100%"></label>
<input type="radio" id="radio-icon-35" name="icon" value="35"/>
<label for="radio-icon-35" style="background-position: 67% 100%"></label>
<input type="radio" id="radio-icon-36" name="icon" value="36"/>
<label for="radio-icon-36" style="background-position: 100% 100%"></label>
</div>
<div class="navButtons">
<a href="#step3" class="white-button">&lsaquo;</a>
<a href="#step5" class="blue-button"><%= _('ÉTAPE SUIVANTE') %> &rsaquo;</a>
</div>
</div>
<div id="step5">
<div class="randomize-button-container">
<button type="submit" name="target" value="randomize" class="randomize white-button"><%= _('CHOISIR AU HASARD') %> <span class="fa fa-random"></span></button>
</div>
<h2><%= _('Signez votre création ! (optionnel)') %></h2>
<input type="text" id="signature" name="signature" />
<div class="navButtons">
<a href="#step4" class="white-button">&lsaquo;</a>
<button type="submit" name="target" value="download" formtarget="_self" class="blue-button"><%= _('GÉNÉRER') %></button>
</div>
</div>
</aside>
<main>
<div>
<noscript><%- _('Pas de javascript ? Pas de problème !<br />Ce générateur fonctionne parfaitement sans javascript, seule la prévisualisation du rendu dans le navigateur est désactivée.') %></noscript>
<canvas id="output" width="600" height="413"></canvas>
<button type="submit" name="target" value="randomize" class="randomize white-button"><span class="fa fa-random"></span></button>
<button type="submit" id="tweet-button" name="target" value="twitter" class="blue-button"><span class="text"><%= _('Tweet') %> </span><span class="fa fa-twitter"></span></button>
<button type="submit" id="fb-button" name="target" value="facebook" class="blue-button"><span class="text"><%= _('Partager') %> </span><span class="fa fa-facebook-square"></span></button>
<button type="submit" name="target" value="download" formtarget="_self" id="save-image" class="white-button"><span class="text"><%= _('Enregistrer') %> </span><span class="fa fa-save"></span></button>
</div>
<div id="credits">
<p><strong><%= _('Site hébergé par') %> <a href="https://laquadrature.net">La Quadrature du Net</a></strong></p>
<p><strong><%= _('Crédits :') %></strong> <%= _('Les polices utilisées viennnent de') %> <strong><a href="https://www.velvetyne.fr/">Velvetyne Type Foundry</a></strong>. Bluu <%= _('par') %> Jean Baptiste Morizot, Bilbo Inc <%= _('par') %> Hélène Marian Srodogora, Boeticher <%= _('par') %> Charles Paille, Combat <%= _('par') %> Martin Desinde, Gulax <%= _('par') %> Morgan Gilbert, Lineal <%= _('par') %> Frank Adebiaye, Resistance <%= _('par') %> Collective, Savate <%= _('par') %> Wech, Solide Mirage <%= _('par') %> Jérémy Landes-Nones, Steps mono <%= _('par') %> Jean Baptiste Morizot, Terminal <%= _('par') %> Rapaël Bastide <%= _('et') %> Jérémy Landes-Nones.</p>
<p><strong><%= _('Code source du site :') %></strong><br />
<a href="https://git.laquadrature.net/lqdn-interne/generateur-slogans/">https://git.laquadrature.net</a>
</p>
</div>
</main>
</form>
<script src="./canvas.js"></script>
</body>
</html>
doctype html
html(lang="fr")
head(prefix="og: http://ogp.me/ns#")
meta(charset="utf-8")
meta(name="viewport" content="width=device-width, initial-scale=1.0")
meta(name="twitter:card" content="summary_large_image")
meta(property="og:title" content="Soutenez La Quadrature du Net !")
meta(property="og:description" content="Soutenez La Quadrature du Net !")
meta(property="og:url" content=protocol + "://" + host + "/" + subdir + "?" + imageParams)
meta(property="og:image" content=protocol + "://" + host + "/generate.png" + subdir + "?" + imageParams)
meta(property="og:image:width" content="600")
meta(property="og:image:height" content="413")
meta(property="og:type" content="website")
link(rel="stylesheet" href="./font-awesome.min.css")
link(rel="stylesheet" href="./style.css")
title
=_('Soutenez La Quadrature du Net !')
body
form(action="./generate.png" target="_blank")
nav
a
img(src="./imgs/logo_lqdn.svg" alt="LQDN")
a(href="#step1").fa.fa-eyedropper
a(href="#step2").fa.fa-i-cursor
a(href="#step3").fa.fa-font
a(href="#step4").fa.fa-pencil
a(href="#step5").fa.fa-cogs
aside#inputs
#step1
.randomize-button-container
button(type="submit" name="target" value="randomize" class="randomize white-button")
=_('CHOISIR AU HASARD')
span.fa.fa-random
h2.title-small
=_('Choisissez 2 couleurs')
h2.title-big
=_('Choisissez la couleur de fond')
.colorpicker
input(type="radio" name="bg-color" value="#f54358" checked)#bg-red
label(for="bg-red")
span(style="background-color: #f54358")
input(type="radio" name="bg-color" value="#ee0088" checked)#bg-pink
label(for="bg-pink")
span(style="background-color: #ee0088")
input(type="radio" name="bg-color" value="#ff9146" checked)#bg-orange
label(for="bg-orange")
span(style="background-color: #ff9146")
input(type="radio" name="bg-color" value="#ffd201" checked)#bg-yellow
label(for="bg-yellow")
span(style="background-color: #ffd201")
input(type="radio" name="bg-color" value="#39d0b7" checked)#bg-teal
label(for="bg-teal")
span(style="background-color: #39d0b7")
input(type="radio" name="bg-color" value="#2f5189" checked)#bg-blue
label(for="bg-blue")
span(style="background-color: #2f5189")
input(type="radio" name="bg-color" value="#000" checked)#bg-black
label(for="bg-black")
span(style="background-color: #000")
h2.title-big
=_('Choisissez la couleur du texte')
.colorpicker
input(type="radio" name="fg-color" value="#f54358" checked)#fg-red
label(for="fg-red")
span(style="background-color: #f54358")
input(type="radio" name="fg-color" value="#ee0088" checked)#fg-pink
label(for="fg-pink")
span(style="background-color: #ee0088")
input(type="radio" name="fg-color" value="#ff9146" checked)#fg-orange
label(for="fg-orange")
span(style="background-color: #ff9146")
input(type="radio" name="fg-color" value="#ffd201" checked)#fg-yellow
label(for="fg-yellow")
span(style="background-color: #ffd201")
input(type="radio" name="fg-color" value="#39d0b7" checked)#fg-teal
label(for="fg-teal")
span(style="background-color: #39d0b7")
input(type="radio" name="fg-color" value="#2f5189" checked)#fg-blue
label(for="fg-blue")
span(style="background-color: #2f5189")
input(type="radio" name="fg-color" value="#000" checked)#fg-black
label(for="fg-black")
span(style="background-color: #000")
input(type="radio" name="fg-color" value="#fff" checked)#fg-white
label(for="fg-white")
span(style="background-color: #fff")
.navButtons
a(href="#step2").blue-button
=_('ÉTAPE SUIVANTE')
| &nbsp;&rsaquo;
#step2
.randomize-button-container
button(type="submit" name="target" value="randomize" class="randomize white-button")
=_('CHOISIR AU HASARD')
span.fa.fa-random
h2
=_('Remplissez le texte à trou')
textarea(placeholder=_('(90 caractères maximum)') rows="8" name="text" maxlength="90")#step2value
.navButtons
a(href="#step1").white-button
| &lsaquo;
a(href="#step3").blue-button
=_('ÉTAPE SUIVANTE')
| &nbsp;&rsaquo;
#step3
.randomize-button-container
button(type="submit" name="target" value="randomize" class="randomize white-button")
=_('CHOISIR AU HASARD')
span.fa.fa-random
h2
=_('Choisissez votre police')
.fontpicker
input(type="radio" name="font" value="bilbo-inc")#radio-font-1
label(for="radio-font-1" style="font-family: bilbo-inc")
| Bilbo inc
input(type="radio" name="font" value="bluu-next")#radio-font-2
label(for="radio-font-2" style="font-family: bluu-next")
| Bluu Next
input(type="radio" name="font" value="combat")#radio-font-3
label(for="radio-font-3" style="font-family: combat")
| Combat
input(type="radio" name="font" value="gulax")#radio-font-4
label(for="radio-font-4" style="font-family: gulax")
| Gulax
input(type="radio" name="font" value="lineal" checked)#radio-font-5
label(for="radio-font-5" style="font-family: lineal")
| Lineal
input(type="radio" name="font" value="resistance")#radio-font-6
label(for="radio-font-6" style="font-family: resistance")
| Resistance
input(type="radio" name="font" value="savate")#radio-font-7
label(for="radio-font-7" style="font-family: savate")
| Savate
input(type="radio" name="font" value="solid-mirage")#radio-font-8
label(for="radio-font-8" style="font-family: solid-mirage")
| Solid Mirage
input(type="radio" name="font" value="steps-mono")#radio-font-9
label(for="radio-font-9" style="font-family: steps-mono")
| Steps-Mono
input(type="radio" name="font" value="terminal")#radio-font-10
label(for="radio-font-10" style="font-family: terminal")
| Terminal
.navButtons
a(href="#step2").white-button
| &lsaquo;
a(href="#step4").blue-button
=_('ÉTAPE SUIVANTE')
| &nbsp;&rsaquo;
#step4
.randomize-button-container
button(type="submit" name="target" value="randomize" class="randomize white-button")
=_('CHOISIR AU HASARD')
span.fa.fa-random
h2
=_('Choisissez votre icône')
.iconpicker
input(type="radio" name="icon" value="1" checked)#radio-icon-1
label(for="radio-icon-1" style="background-position: 0 0")
input(type="radio" name="icon" value="2")#radio-icon-2
label(for="radio-icon-2" style="background-position: 33% 0")
input(type="radio" name="icon" value="3")#radio-icon-3
label(for="radio-icon-3" style="background-position: 67% 0")
input(type="radio" name="icon" value="4")#radio-icon-4
label(for="radio-icon-4" style="background-position: 100% 0")
input(type="radio" name="icon" value="5")#radio-icon-5
label(for="radio-icon-5" style="background-position: 0 12.5%")
input(type="radio" name="icon" value="6")#radio-icon-6
label(for="radio-icon-6" style="background-position: 33% 12.5%")
input(type="radio" name="icon" value="7")#radio-icon-7
label(for="radio-icon-7" style="background-position: 67% 12.5%")
input(type="radio" name="icon" value="8")#radio-icon-8
label(for="radio-icon-8" style="background-position: 100% 12.5%")
input(type="radio" name="icon" value="9")#radio-icon-9
label(for="radio-icon-9" style="background-position: 0 24%")
input(type="radio" name="icon" value="10")#radio-icon-10
label(for="radio-icon-10" style="background-position: 33% 24%")
input(type="radio" name="icon" value="11")#radio-icon-11
label(for="radio-icon-11" style="background-position: 67% 24%")
input(type="radio" name="icon" value="12")#radio-icon-12
label(for="radio-icon-12" style="background-position: 100% 24%")
input(type="radio" name="icon" value="13")#radio-icon-13
label(for="radio-icon-13" style="background-position: 0 37.5%")
input(type="radio" name="icon" value="14")#radio-icon-14
label(for="radio-icon-14" style="background-position: 33% 37.5%")
input(type="radio" name="icon" value="15")#radio-icon-15
label(for="radio-icon-15" style="background-position: 67% 37.5%")
input(type="radio" name="icon" value="16")#radio-icon-16
label(for="radio-icon-16" style="background-position: 100% 37.5%")
input(type="radio" name="icon" value="17")#radio-icon-17
label(for="radio-icon-17" style="background-position: 0 50%")
input(type="radio" name="icon" value="18")#radio-icon-18
label(for="radio-icon-18" style="background-position: 33% 50%")
input(type="radio" name="icon" value="19")#radio-icon-19
label(for="radio-icon-19" style="background-position: 67% 50%")
input(type="radio" name="icon" value="20")#radio-icon-20
label(for="radio-icon-20" style="background-position: 100% 50%")
input(type="radio" name="icon" value="21")#radio-icon-21
label(for="radio-icon-21" style="background-position: 0 61%")
input(type="radio" name="icon" value="22")#radio-icon-22
label(for="radio-icon-22" style="background-position: 33% 61%")
input(type="radio" name="icon" value="23")#radio-icon-23
label(for="radio-icon-23" style="background-position: 67% 61%")
input(type="radio" name="icon" value="24")#radio-icon-24
label(for="radio-icon-24" style="background-position: 100% 61%")
input(type="radio" name="icon" value="25")#radio-icon-25
label(for="radio-icon-25" style="background-position: 0 73%")
input(type="radio" name="icon" value="26")#radio-icon-26
label(for="radio-icon-26" style="background-position: 33% 73%")
input(type="radio" name="icon" value="27")#radio-icon-27
label(for="radio-icon-27" style="background-position: 67% 73%")
input(type="radio" name="icon" value="28")#radio-icon-28
label(for="radio-icon-28" style="background-position: 100% 73%")
input(type="radio" name="icon" value="29")#radio-icon-29
label(for="radio-icon-29" style="background-position: 0 87.5%")
input(type="radio" name="icon" value="30")#radio-icon-30
label(for="radio-icon-30" style="background-position: 33% 87.5%")
input(type="radio" name="icon" value="31")#radio-icon-31
label(for="radio-icon-31" style="background-position: 67% 87.5%")
input(type="radio" name="icon" value="32")#radio-icon-32
label(for="radio-icon-32" style="background-position: 100% 87.5%")
input(type="radio" name="icon" value="33")#radio-icon-33
label(for="radio-icon-33" style="background-position: -1% 100%")
input(type="radio" name="icon" value="34")#radio-icon-34
label(for="radio-icon-34" style="background-position: 32% 100%")
input(type="radio" name="icon" value="35")#radio-icon-35
label(for="radio-icon-35" style="background-position: 67% 100%")
input(type="radio" name="icon" value="36")#radio-icon-36
label(for="radio-icon-36" style="background-position: 100% 100%")
.navButtons
a(href="#step3").white-button
| &lsaquo;
a(href="#step5").blue-button
=_('ÉTAPE SUIVANTE')
| &nbsp;&rsaquo;
#step5
.randomize-button-container
button(type="submit" name="target" value="randomize" class="randomize white-button")
=_('CHOISIR AU HASARD')
span.fa.fa-random
h2
=_('Signez votre création ! (optionnel)')
input(type="text" name="signature")#signature
.navButtons
a(href="#step4").white-button
| &lsaquo;
button(type="submit" name="target" value="download" formtarget="_self").blue-button
=_('GÉNÉRER')
main
div
noscript
=_('Pas de javascript ? Pas de problème !<br />Ce générateur fonctionne parfaitement sans javascript, seule la prévisualisation du rendu dans le navigateur est désactivée.')
canvas(width="600" height="413")#output
button(type="submit" name="target" value="randomize").randomize.white-button
span.fa.fa-random
button(type="submit" name="target" value="twitter")#tweet-button.blue-button
span.text
=_('Tweet') + ' '
span.fa.fa-twitter
button(type="submit" name="target" value="facebook")#fb-button.blue-button
span.text
=_('Partager') + ' '
span.fa.fa-facebook-square
button(type="submit" name="target" value="download" formtarget="_self")#save-image.white-button
span.text
=_('Enregistrer') + ' '
span.fa.fa-save
#credits
p
strong= _('Site hébergé par') + ' '
a(href="https://laquadrature.net")
| La Quadrature du Net
p
strong= _('Crédits :') + ' '
=_('Les polices utilisées viennnent de')
strong
a(href="https://www.velvetyne.fr/") &nbsp;Velvetyne Type Foundry
= ". Bluu " + _('par') + " Jean Baptiste Morizot, Bilbo Inc " + _('par') + " Hélène Marian Srodogora, Combat " + _('par') + " Martin Desinde, Gulax " + _('par') + " Morgan Gilbert, Lineal " + _('par') + " Frank Adebiaye, Resistance " + _('par') + " Collective, Savate " + _('par') + " Wech, Solide Mirage " + _('par') + " Jérémy Landes-Nones, Steps mono " + _('par') + " Jean Baptiste Morizot, Terminal " + _('par') + " Rapaël Bastide " + _('et') + " Jérémy Landes-Nones."
p
strong= _('Code source du site :')
br
a(href="https://git.laquadrature.net/lqdn-interne/generateur-slogans/")
| https://git.laquadrature.net
script(src="./canvas.js")
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment