index.pug 7.53 KB
Newer Older
Thibaut Broggi's avatar
Thibaut Broggi committed
1 2
mixin randomButtonContainer
  .randomize-button-container
3
    button(type="submit" name="target" value="randomize" formaction="" formtarget="_self").randomize.white-button
Thibaut Broggi's avatar
Thibaut Broggi committed
4 5
      =_('CHOISIR AU HASARD') + ' '
      span.fa.fa-random
6
doctype html
7
html(lang=locale)
8 9 10 11
  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")
Thibaut Broggi's avatar
Thibaut Broggi committed
12 13
    meta(property="og:title" content=_("Soutenez La Quadrature du Net !"))
    meta(property="og:description" content=_("Soutenez La Quadrature du Net !"))
14
    meta(property="og:url" content=protocol + "://" + host + "/" + subdir + "?" + imageParams)
15
    meta(property="og:image" content=protocol + "://" + host + "/" + subdir + "generate.png?" + imageParams)
16 17 18
    meta(property="og:image:width" content="600")
    meta(property="og:image:height" content="413")
    meta(property="og:type" content="website")
Thibaut Broggi's avatar
Thibaut Broggi committed
19
    link(rel="shotcut icon" type="image/png" href="./imgs/favicon.png")
20 21 22 23 24 25
    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")
26
      input(type="hidden" name="lang" value=locale)
27
      nav
Thibaut Broggi's avatar
Thibaut Broggi committed
28
        a(href="/")
29 30 31 32 33 34 35 36
          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
Thibaut Broggi's avatar
Thibaut Broggi committed
37
          +randomButtonContainer
38 39 40 41 42
          h2.title-small
            =_('Choisissez 2 couleurs')
          h2.title-big
            =_('Choisissez la couleur de fond')
          .colorpicker
Thibaut Broggi's avatar
Thibaut Broggi committed
43
            each color, i in ["#f54358", "#ee0088", "#ff9146", "#ffd201", "#39d0b7", "#2f5189", "#000"]
44
              input(type="radio" name="bgColor" value=color id="bg-" + i checked=(params.bgColor === color))
Thibaut Broggi's avatar
Thibaut Broggi committed
45 46
              label(for="bg-" + i)
                span(style="background-color: " + color)
47 48 49
          h2.title-big
            =_('Choisissez la couleur du texte')
          .colorpicker
Thibaut Broggi's avatar
Thibaut Broggi committed
50
            each color, i in ["#f54358", "#ee0088", "#ff9146", "#ffd201", "#39d0b7", "#2f5189", "#000", "#fff"]
51
              input(type="radio" name="fgColor" value=color id="fg-" + i checked=(params.fgColor === color))
Thibaut Broggi's avatar
Thibaut Broggi committed
52 53
              label(for="fg-" + i)
                span(style="background-color: " + color)
54 55 56 57 58
          .navButtons
            a(href="#step2").blue-button
              =_('ÉTAPE SUIVANTE')
              |  ›
        #step2
Thibaut Broggi's avatar
Thibaut Broggi committed
59
          +randomButtonContainer
60 61 62
          h2
            =_('Remplissez le texte à trou')
          textarea(placeholder=_('(90 caractères maximum)') rows="8" name="text" maxlength="90")#step2value
63
            =params.text
64 65 66 67 68 69 70
          .navButtons
            a(href="#step1").white-button
              | ‹
            a(href="#step3").blue-button
              =_('ÉTAPE SUIVANTE')
              |  ›
        #step3
Thibaut Broggi's avatar
Thibaut Broggi committed
71
          +randomButtonContainer
72 73 74
          h2
            =_('Choisissez votre police')
          .fontpicker
75 76 77 78
            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
79 80 81 82 83 84 85
          .navButtons
            a(href="#step2").white-button
              | ‹
            a(href="#step4").blue-button
              =_('ÉTAPE SUIVANTE')
              |  ›
        #step4
Thibaut Broggi's avatar
Thibaut Broggi committed
86
          +randomButtonContainer
87 88 89
          h2
            =_('Choisissez votre icône')
          .iconpicker
Thibaut Broggi's avatar
Thibaut Broggi committed
90
            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]
91
              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
92
              label(for="radio-icon-" + (i + 1) style="background-position: " + i % 4 * 33.3 + "% " + offset + "%")
93 94 95 96 97 98 99
          .navButtons
            a(href="#step3").white-button
              | ‹
            a(href="#step5").blue-button
              =_('ÉTAPE SUIVANTE')
              |  ›
        #step5
Thibaut Broggi's avatar
Thibaut Broggi committed
100
          +randomButtonContainer
101 102
          h2
            =_('Signez votre création ! (optionnel)')
103
            input(type="text" name="signature" value=params.signature)#signature
104 105 106
          .navButtons
            a(href="#step4").white-button
              | ‹
107
            button(type="submit" formtarget="_self" formaction="").blue-button
108 109
              =_('GÉNÉRER')
      main
110
        div#langPicker
111
          button(type="submit" name="changeLang" value="fr" formaction="" formtarget="_self")#frButton
112
            =_('Français')
113
          button(type="submit" name="changeLang" value="en" formaction="" formtarget="_self")#enButton
114
            =_('Anglais')
115 116
        div
          noscript
117
            img(src=protocol + "://" + host + "/" + subdir + "generate.png?" + imageParams alt="preview" width="600")
118
          canvas(width="600" height="413")#output
119 120 121 122 123
          noscript
            button(type="submit" formtarget="_self" formaction="" style="float: left").white-button
              span.text
                =_('Actualiser') + ' '
              span.fa.fa-refresh
124
          button(type="submit" name="target" value="randomize" formaction="" formtarget="_self").randomize.white-button
125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147
            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
Thibaut Broggi's avatar
Thibaut Broggi committed
148
            = ". 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, Solid Mirage " + _('par') + " Jérémy Landes-Nones, Steps mono " + _('par') + " Jean Baptiste Morizot, Terminal " + _('par') + " Rapaël Bastide " + _('et') + " Jérémy Landes-Nones."
149
          p
150 151
            label(for="radio-icon-hidden")
              strong= _('Code source du site :')
152 153 154
            br
            a(href="https://git.laquadrature.net/lqdn-interne/generateur-slogans/")
              | https://git.laquadrature.net
155 156
          input(type="radio" id="radio-icon-hidden" name="icon" value="37" checked=(params.icon == 37) style="display: none")
    script(src="./canvas.js")