index.pug 7.37 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 148 149 150 151 152 153 154
            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")