html
  head
    title='Moe Counter!'
    meta(name='viewport', content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no')
    link(rel='icon', type='image/png', href=`${site}/favicon.png`)
    link(rel='stylesheet', href='https://cdn.jsdelivr.net/npm/normalize.css')
    link(rel='stylesheet', href='https://cdn.jsdelivr.net/npm/bamboo.css')
    link(rel='stylesheet/less', href=`${site}/style.less`)
    script(less, src='https://cdn.jsdelivr.net/npm/less')
    if ga_id
      <!-- Global site tag (gtag.js) - Google Analytics -->
      script(async, src=`https://www.googletagmanager.com/gtag/js?id=${ga_id}`)
    script.
      window.dataLayer = window.dataLayer || [];
      function gtag() { dataLayer.push(arguments); }
      gtag('js', new Date());

      gtag('config', '#{ga_id}');

      function _evt_push(type, category, label) {
        gtag('event', type, {
          'event_category' : category,
          'event_label' : label
        });
      }

    script.
      var __global_data = { site: "#{site}" };

  body
    h1#main_title
      i Moe Counter!

    h3 How to use
    p Set a unique id for your counter, replace 
      code :name
      |  in the url, That's it!

    h5 SVG address
    code #{site}/@:name

    h5 Img tag
    code &lt;img src="#{site}/@:name" alt=":name" />

    h5 Markdown
    code ![:name](#{site}/@:name)

    h5 e.g.
      img(src=`${site}/@index` alt="Moe Counter!")

    details#themes
      summary#more_theme(onclick='_evt_push("click", "normal", "more_theme")')
        h3 More theme✨
      p Just use the query parameters <code>theme</code>, like this: <code>#{site}/@:name?theme=moebooru</code>
      each theme in Object.keys(themeList)
        div.item(data-theme=theme)
          h5 #{theme}
          img(data-src=`${site}/@demo?theme=${theme}` alt=theme)

    h3 Credits
    ul
      li: a(href='https://glitch.com/', target='_blank', rel='nofollow') Glitch
      li: a(href='https://space.bilibili.com/703007996', target='_blank', title='A-SOUL_Official') A-SOUL
      li: a(href='https://github.com/moebooru/moebooru', target='_blank', rel='nofollow') moebooru
      li
        a(href='javascript:alert("!!! NSFW LINK !!!\\nPlease enter the url manually")') gelbooru.com
        |  NSFW
      li: a(href='https://icons8.com/icon/80355/star', target='_blank', rel='nofollow') Icons8
      span: i And all booru site...

    h3 Tool
    .tool
      table
        thead
          tr
            th Param
            th Description
            th Value
        tbody
          tr
            td: code name
            td Unique counter name
            td: input#name(type='text', placeholder=':name')
          tr
            td: code theme
            td Select a counter image theme, default is 
              code moebooru
            td
              select#theme
                option(value="random", selected) * random
                each theme in Object.keys(themeList)
                  option(value=theme) #{theme}
          tr
            td: code padding
            td Set the minimum length, between 1-32, default is 
              code 7
            td: input#padding(type='number', value='7', min='1', max='32', step='1', oninput='this.value = this.value.replace(/[^0-9]/g, "")')
          tr
            td: code offset
            td Set the offset pixel value, between -500-500, default is 
              code 0
            td: input#offset(type='number', value='0', min='-500', max='500', step='1', oninput='this.value = this.value.replace(/[^0-9|\-]/g, "")')
          tr
            td: code scale
            td Set the image scale, between 0.1-2, default is 
              code 1
            td: input#scale(type='number', value='1', min='0.1', max='2', step='0.1', oninput='this.value = this.value.replace(/[^0-9|\.]/g, "")')
          tr
            td: code align
            td Set the image align, Enum top/center/bottom, default is 
              code top
            td: select#align(name="align")
                option(value="top", selected) top
                option(value="center") center
                option(value="bottom") bottom
          tr
            td: code pixelated
            td Enable pixelated mode, Enum 0/1, default is 
              code 1
            td
              input#pixelated(type='checkbox', role='switch', checked)
              label(for='pixelated'): span
          tr
            td: code darkmode
            td Enable dark mode, Enum 0/1/auto, default is 
              code auto
            td: select#darkmode(name="darkmode")
                option(value="auto", selected) auto
                option(value="1") yes
                option(value="0") no
          tr
            td(colspan=3)
              h4.caption Unusual Options
          tr
            td: code num
            td Set counter display number, 0 for disable, default is 
              code 0
            td: input#num(type='number', value='0', min='0', max='1000000000000000', step='1', oninput='this.value = this.value.replace(/[^0-9]/g, "")')

      button#get(onclick='_evt_push("click", "normal", "get_counter")') Generate

      div
        code#code
        img#result

    p.github
      a(href='https://github.com/journey-ad/Moe-Counter', target='_blank', onclick='_evt_push("click", "normal", "go_github")') source code

    div.back-to-top

    script(async, src='https://cdn.jsdelivr.net/npm/party-js@2/bundle/party.min.js')
    script(async, src=`${site}/script.js`)