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
            each color, i in ["#f54358", "#ee0088", "#ff9146", "#ffd201", "#39d0b7", "#2f5189", "#000"]
              input(type="radio" name="bg-color" value=color id="bg-" + i checked=(i === 0))
              label(for="bg-" + i)
                span(style="background-color: " + color)
          h2.title-big
            =_('Choisissez la couleur du texte')
          .colorpicker
            each color, i in ["#f54358", "#ee0088", "#ff9146", "#ffd201", "#39d0b7", "#2f5189", "#000", "#fff"]
              input(type="radio" name="fg-color" value=color id="fg-" + i checked=(i === 3))
              label(for="fg-" + i)
                span(style="background-color: " + color)
          .navButtons
            a(href="#step2").blue-button
              =_('ÉTAPE SUIVANTE')
              |  ›
        #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
              | ‹
            a(href="#step3").blue-button
              =_('ÉTAPE SUIVANTE')
              |  ›
        #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
              | ‹
            a(href="#step4").blue-button
              =_('ÉTAPE SUIVANTE')
              |  ›
        #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
            each offset, i in [0, 0, 0, 0, 12.5, 12.5, 12.5, 12.5, 24, 24, 24, 24, 37.5, 37.5, 37.5, 37.5, 50, 50, 50, 50, 61, 61, 61, 61, 73, 73, 73, 73, 87.5, 87.5, 87.5, 87.5, 100, 100, 100, 100]
              input(type="radio" id="radio-icon-" + (i + 1) name="icon" value=(i + 1) checked=(i === 0))
              label(for="radio-icon-" + (i + 1) style="background-position: " + i % 4 * 33.3 + "% " + offset + "%")
          .navButtons
            a(href="#step3").white-button
              | ‹
            a(href="#step5").blue-button
              =_('ÉTAPE SUIVANTE')
              |  ›
        #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
              | ‹
            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")