index.pug 8.65 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
    link(rel="stylesheet" href="./font-awesome.min.css")
    link(rel="stylesheet" href="./style.css")
22
23
    noscript
      link(rel="stylesheet" href="./noscript.css")
24
25
26
27
    title
      =_('Soutenez La Quadrature du Net !')
  body
    form(action="./generate.png" target="_blank")
28
      input(type="hidden" name="lang" value=locale)
29
      nav
Thibaut Broggi's avatar
Thibaut Broggi committed
30
        a(href="/")
31
32
33
34
35
36
37
38
          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
39
          +randomButtonContainer
40
41
42
43
44
          h2.title-small
            =_('Choisissez 2 couleurs')
          h2.title-big
            =_('Choisissez la couleur de fond')
          .colorpicker
Thibaut Broggi's avatar
Thibaut Broggi committed
45
            each color, i in ["#f54358", "#ee0088", "#ff9146", "#ffd201", "#39d0b7", "#2f5189", "#000"]
46
              input(type="radio" name="bgColor" value=color id="bg-" + i checked=(params.bgColor === color))
Thibaut Broggi's avatar
Thibaut Broggi committed
47
48
              label(for="bg-" + i)
                span(style="background-color: " + color)
49
50
51
          h2.title-big
            =_('Choisissez la couleur du texte')
          .colorpicker
Thibaut Broggi's avatar
Thibaut Broggi committed
52
            each color, i in ["#f54358", "#ee0088", "#ff9146", "#ffd201", "#39d0b7", "#2f5189", "#000", "#fff"]
53
              input(type="radio" name="fgColor" value=color id="fg-" + i checked=(params.fgColor === color))
Thibaut Broggi's avatar
Thibaut Broggi committed
54
55
              label(for="fg-" + i)
                span(style="background-color: " + color)
56
57
58
59
60
          .navButtons
            a(href="#step2").blue-button
              =_('ÉTAPE SUIVANTE')
              |  ›
        #step2
Thibaut Broggi's avatar
Thibaut Broggi committed
61
          +randomButtonContainer
62
63
64
          h2
            =_('Remplissez le texte à trou')
          textarea(placeholder=_('(90 caractères maximum)') rows="8" name="text" maxlength="90")#step2value
65
            =params.text
66
67
68
69
70
71
72
          .navButtons
            a(href="#step1").white-button
              | ‹
            a(href="#step3").blue-button
              =_('ÉTAPE SUIVANTE')
              |  ›
        #step3
Thibaut Broggi's avatar
Thibaut Broggi committed
73
          +randomButtonContainer
74
75
76
          h2
            =_('Choisissez votre police')
          .fontpicker
77
78
79
80
            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
81
82
83
84
85
86
87
          .navButtons
            a(href="#step2").white-button
              | ‹
            a(href="#step4").blue-button
              =_('ÉTAPE SUIVANTE')
              |  ›
        #step4
Thibaut Broggi's avatar
Thibaut Broggi committed
88
          +randomButtonContainer
89
90
91
          h2
            =_('Choisissez votre icône')
          .iconpicker
Thibaut Broggi's avatar
Thibaut Broggi committed
92
            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]
93
              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
94
              label(for="radio-icon-" + (i + 1) style="background-position: " + i % 4 * 33.3 + "% " + offset + "%")
95
96
97
98
99
100
101
          .navButtons
            a(href="#step3").white-button
              | ‹
            a(href="#step5").blue-button
              =_('ÉTAPE SUIVANTE')
              |  ›
        #step5
Thibaut Broggi's avatar
Thibaut Broggi committed
102
          +randomButtonContainer
103
104
          h2
            =_('Signez votre création ! (optionnel)')
105
            input(type="text" name="signature" value=params.signature)#signature
106
107
108
          .navButtons
            a(href="#step4").white-button
              | ‹
109
            button(type="submit" formtarget="_self" formaction="").blue-button
110
111
              =_('GÉNÉRER')
      main
112
        div#langPicker
113
          button(type="submit" name="changeLang" value="fr" formaction="" formtarget="_self")#frButton
114
            =_('Français')
115
          button(type="submit" name="changeLang" value="en" formaction="" formtarget="_self")#enButton
116
            =_('Anglais')
117
118
        div
          noscript
119
            img(src=protocol + "://" + host + "/" + subdir + "generate.png?" + imageParams alt="preview" width="600")
120
          canvas(width="600" height="413")#output
121
122
123
124
125
126
          div#actionButtons
            noscript
              button(type="submit" formtarget="_self" formaction="" style="float: left").white-button
                span.text
                  =_('Actualiser') + ' '
                span.fa.fa-refresh
127
            button(type="submit" name="target" value="randomize" formaction="" formtarget="_self").randomize.white-button.share-button
128
129
130
131
132
133
134
135
136
137
              span.fa.fa-random
            button(type="submit" name="target" value="mastodon").blue-button.share-button
              img(src="./imgs/mastodon.svg" width="20" height="20" alt="mamot")
            button(type="submit" name="target" value="diaspora").blue-button.share-button
              img(src="./imgs/diaspora.svg" width="20" height="20" alt="diaspora")
            button(type="submit" name="target" value="twitter").blue-button.share-button
              span.fa.fa-twitter
            button(type="submit" name="target" value="facebook").blue-button.share-button
              span.fa.fa-facebook-square
            button(type="submit" name="target" value="download" formtarget="_self").white-button
138
              span.text
139
140
                =_('Enregistrer') + ' '
              span.fa.fa-save
141
142
143
144
145
146
        #credits
          p
            strong= _('Site hébergé par') + ' '
              a(href="https://laquadrature.net")
                | La Quadrature du Net
          p
Thibaut Broggi's avatar
Thibaut Broggi committed
147
148
            label(for="radio-icon-hidden-2")
              strong= _('Crédits :') + ' '
149
150
            =_('Les polices utilisées viennnent de')
            strong
Thibaut Broggi's avatar
Thibaut Broggi committed
151
152
153
154
155
156
157
              a(href="https://www.velvetyne.fr/")  Velvetyne Type Foundry. 
            label(for="radio-icon-hidden-5")
              | Bluu 
            = _('par') + " Jean Baptiste Morizot, Bilbo Inc " + _('par') + " Hélène Marian Srodogora, "
            label(for="radio-icon-hidden-4")
              | Combat 
            = _('par') + " Martin Desinde, Gulax " + _('par') + " Morgan Gilbert, Lineal " + _('par') + " Frank Adebiaye, "
Thibaut Broggi's avatar
Thibaut Broggi committed
158
159
160
            label(for="radio-icon-hidden-3")
              | 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."
161
          p
Thibaut Broggi's avatar
Thibaut Broggi committed
162
            label(for="radio-icon-hidden-1")
163
              strong= _('Code source du site :')
164
165
166
            br
            a(href="https://git.laquadrature.net/lqdn-interne/generateur-slogans/")
              | https://git.laquadrature.net
Thibaut Broggi's avatar
Thibaut Broggi committed
167
168
169
          input(type="radio" id="radio-icon-hidden-1" name="icon" value="37" checked=(params.icon == 37) style="display: none")
          input(type="radio" id="radio-icon-hidden-2" name="icon" value="38" checked=(params.icon == 38) style="display: none")
          input(type="radio" id="radio-icon-hidden-3" name="icon" value="39" checked=(params.icon == 39) style="display: none")
Thibaut Broggi's avatar
Thibaut Broggi committed
170
171
          input(type="radio" id="radio-icon-hidden-4" name="icon" value="40" checked=(params.icon == 40) style="display: none")
          input(type="radio" id="radio-icon-hidden-5" name="icon" value="41" checked=(params.icon == 41) style="display: none")
172
    script(src="./canvas.js")