index.pug 7.28 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 12 13 14
  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)
15
    meta(property="og:image" content=protocol + "://" + host + "/" + subdir + "generate.png?" + imageParams)
16 17 18 19 20 21 22 23 24
    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")
25
      input(type="hidden" name="lang" value=locale)
26 27 28 29 30 31 32 33 34 35
      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
Thibaut Broggi's avatar
Thibaut Broggi committed
36
          +randomButtonContainer
37 38 39 40 41
          h2.title-small
            =_('Choisissez 2 couleurs')
          h2.title-big
            =_('Choisissez la couleur de fond')
          .colorpicker
Thibaut Broggi's avatar
Thibaut Broggi committed
42
            each color, i in ["#f54358", "#ee0088", "#ff9146", "#ffd201", "#39d0b7", "#2f5189", "#000"]
43
              input(type="radio" name="bgColor" value=color id="bg-" + i checked=(params.bgColor === color))
Thibaut Broggi's avatar
Thibaut Broggi committed
44 45
              label(for="bg-" + i)
                span(style="background-color: " + color)
46 47 48
          h2.title-big
            =_('Choisissez la couleur du texte')
          .colorpicker
Thibaut Broggi's avatar
Thibaut Broggi committed
49
            each color, i in ["#f54358", "#ee0088", "#ff9146", "#ffd201", "#39d0b7", "#2f5189", "#000", "#fff"]
50
              input(type="radio" name="fgColor" value=color id="fg-" + i checked=(params.fgColor === color))
Thibaut Broggi's avatar
Thibaut Broggi committed
51 52
              label(for="fg-" + i)
                span(style="background-color: " + color)
53 54 55 56 57
          .navButtons
            a(href="#step2").blue-button
              =_('ÉTAPE SUIVANTE')
              |  ›
        #step2
Thibaut Broggi's avatar
Thibaut Broggi committed
58
          +randomButtonContainer
59 60 61
          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
          .navButtons
            a(href="#step1").white-button
              | ‹
            a(href="#step3").blue-button
              =_('ÉTAPE SUIVANTE')
              |  ›
        #step3
Thibaut Broggi's avatar
Thibaut Broggi committed
70
          +randomButtonContainer
71 72 73
          h2
            =_('Choisissez votre police')
          .fontpicker
74 75 76 77
            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
78 79 80 81 82 83 84
          .navButtons
            a(href="#step2").white-button
              | ‹
            a(href="#step4").blue-button
              =_('ÉTAPE SUIVANTE')
              |  ›
        #step4
Thibaut Broggi's avatar
Thibaut Broggi committed
85
          +randomButtonContainer
86 87 88
          h2
            =_('Choisissez votre icône')
          .iconpicker
Thibaut Broggi's avatar
Thibaut Broggi committed
89
            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]
90
              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
91
              label(for="radio-icon-" + (i + 1) style="background-position: " + i % 4 * 33.3 + "% " + offset + "%")
92 93 94 95 96 97 98
          .navButtons
            a(href="#step3").white-button
              | ‹
            a(href="#step5").blue-button
              =_('ÉTAPE SUIVANTE')
              |  ›
        #step5
Thibaut Broggi's avatar
Thibaut Broggi committed
99
          +randomButtonContainer
100 101
          h2
            =_('Signez votre création ! (optionnel)')
102
            input(type="text" name="signature" value=params.signature)#signature
103 104 105
          .navButtons
            a(href="#step4").white-button
              | ‹
106
            button(type="submit" formtarget="_self" formaction="").blue-button
107 108
              =_('GÉNÉRER')
      main
109
        div#langPicker
110
          button(type="submit" name="changeLang" value="fr" formaction="" formtarget="_self")#frButton
111
            =_('Français')
112
          button(type="submit" name="changeLang" value="en" formaction="" formtarget="_self")#enButton
113
            =_('Anglais')
114 115
        div
          noscript
116
            img(src=protocol + "://" + host + "/" + subdir + "generate.png?" + imageParams alt="preview" width="600")
117
          canvas(width="600" height="413")#output
118 119 120 121 122
          noscript
            button(type="submit" formtarget="_self" formaction="" style="float: left").white-button
              span.text
                =_('Actualiser') + ' '
              span.fa.fa-refresh
123
          button(type="submit" name="target" value="randomize" formaction="" formtarget="_self").randomize.white-button
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
            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")