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