index.pug 8.51 KB
Newer Older
1
doctype html
2
html(lang=locale)
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
  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
            each color, i in ["#f54358", "#ee0088", "#ff9146", "#ffd201", "#39d0b7", "#2f5189", "#000"]
40
              input(type="radio" name="bgColor" value=color id="bg-" + i checked=(params.bgColor === color))
Thibaut Broggi's avatar
Thibaut Broggi committed
41 42
              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
            each color, i in ["#f54358", "#ee0088", "#ff9146", "#ffd201", "#39d0b7", "#2f5189", "#000", "#fff"]
47
              input(type="radio" name="fgColor" value=color id="fg-" + i checked=(params.fgColor === color))
Thibaut Broggi's avatar
Thibaut Broggi committed
48 49
              label(for="fg-" + i)
                span(style="background-color: " + color)
50 51 52 53 54 55 56 57 58 59 60 61
          .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
62
            =params.text
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 120
          .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
121
            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]
122
              input(type="radio" id="radio-icon-" + (i + 1) name="icon" value=(i + 1) checked=(params.icon == i + 1))
Thibaut Broggi's avatar
Thibaut Broggi committed
123
              label(for="radio-icon-" + (i + 1) style="background-position: " + i % 4 * 33.3 + "% " + offset + "%")
124 125 126 127 128 129 130 131 132 133 134 135 136
          .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)')
137
            input(type="text" name="signature" value=params.signature)#signature
138 139 140
          .navButtons
            a(href="#step4").white-button
              | ‹
141
            button(type="submit" formtarget="_self" formaction="").blue-button
142 143 144 145
              =_('GÉNÉRER')
      main
        div
          noscript
146
            img(src=protocol + "://" + host + "/generate.png" + subdir + "?" + imageParams alt="preview" width="600" height="413")
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 178
          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/")  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")