index.pug 7.29 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
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
      nav
Thibaut Broggi's avatar
Thibaut Broggi committed
27
        a(href="/")
28
29
30
31
32
33
34
35
          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")