index.pug 8.5 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38
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
Thibaut Broggi's avatar
Thibaut Broggi committed
39 40 41 42
            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)
43 44 45
          h2.title-big
            =_('Choisissez la couleur du texte')
          .colorpicker
Thibaut Broggi's avatar
Thibaut Broggi committed
46 47 48 49
            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)
50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119
          .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
Thibaut Broggi's avatar
Thibaut Broggi committed
120 121 122
            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 + "%")
123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177
          .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")