index.pug

mixin randomButtonContainer
  .randomize-button-container
    button(type="submit" name="target" value="randomize" formaction="" formtarget="_self").randomize.white-button
      =_('CHOISIR AU HASARD') + ' '
      span.fa.fa-random
doctype html
html(lang=locale)
  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 !')
  body
    form(action="./generate.png" target="_blank")
      input(type="hidden" name="lang" value=locale)
      nav
        a(href="/")
          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
          +randomButtonContainer
          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="bgColor" value=color id="bg-" + i checked=(params.bgColor === color))
              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="fgColor" value=color id="fg-" + i checked=(params.fgColor === color))
              label(for="fg-" + i)
                span(style="background-color: " + color)
          .navButtons
            a(href="#step2").blue-button
              =_('ÉTAPE SUIVANTE')
              | &nbsp;&rsaquo;
        #step2
          +randomButtonContainer
          h2
            =_('Remplissez le texte à trou')
          textarea(placeholder=_('(90 caractères maximum)') rows="8" name="text" maxlength="90")#step2value
            =params.text
          .navButtons
            a(href="#step1").white-button
              | &lsaquo;
            a(href="#step3").blue-button
              =_('ÉTAPE SUIVANTE')
              | &nbsp;&rsaquo;
        #step3
          +randomButtonContainer
          h2
            =_('Choisissez votre police')
          .fontpicker
            each display, name in {"bilbo-inc": "Bilbo inc", "bluu-next": "Bluu Next", "combat": "Combat", "gulax": "Gulax", "lineal": "Lineal", "resistance": "Resistance", "savate": "Savate", "solid-mirage": "Solid Mirage", "steps-mono": "Steps-mono", "terminal": "Terminal"}
              input(type="radio" name="font" value=name id="font-" + name checked=(params.font === name))
              label(for="font-" + name style="font-family: " + name)
                = display
          .navButtons
            a(href="#step2").white-button
              | &lsaquo;
            a(href="#step4").blue-button
              =_('ÉTAPE SUIVANTE')
              | &nbsp;&rsaquo;
        #step4
          +randomButtonContainer
          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=(params.icon == i + 1))
              label(for="radio-icon-" + (i + 1) style="background-position: " + i % 4 * 33.3 + "% " + offset + "%")
          .navButtons
            a(href="#step3").white-button
              | &lsaquo;
            a(href="#step5").blue-button
              =_('ÉTAPE SUIVANTE')
              | &nbsp;&rsaquo;
        #step5
          +randomButtonContainer
          h2
            =_('Signez votre création ! (optionnel)')
            input(type="text" name="signature" value=params.signature)#signature
          .navButtons
            a(href="#step4").white-button
              | &lsaquo;
            button(type="submit" formtarget="_self" formaction="").blue-button
              =_('GÉNÉRER')
      main
        div#langPicker
          button(type="submit" name="changeLang" value="fr" formaction="" formtarget="_self")#frButton
            =_('Français')
          button(type="submit" name="changeLang" value="en" formaction="" formtarget="_self")#enButton
            =_('Anglais')
        div
          noscript
            img(src=protocol + "://" + host + "/" + subdir + "generate.png?" + imageParams alt="preview" width="600")
          canvas(width="600" height="413")#output
          noscript
            button(type="submit" formtarget="_self" formaction="" style="float: left").white-button
              span.text
                =_('Actualiser') + ' '
              span.fa.fa-refresh
          button(type="submit" name="target" value="randomize" formaction="" formtarget="_self").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")