html
  head
    title='Moe Counter!'
    meta(name='viewport', content='width=device-width, initial-scale=1')
    link(rel='icon', type='image/png', href='favicon.png')
    link(rel='stylesheet', href='https://unpkg.com/normalize.css')
    link(rel='stylesheet', href='https://unpkg.com/bamboo.css')
    link(rel='stylesheet', href='style.css')
    <!-- Global site tag (gtag.js) - Google Analytics -->
    script(async, src='https://www.googletagmanager.com/gtag/js?id=G-2RLWN5JXRL')
    script.
      window.dataLayer = window.dataLayer || [];
      function gtag() {dataLayer.push(arguments); }
      gtag('js', new Date());

      gtag('config', 'G-2RLWN5JXRL');

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

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

    style.
      html {
        scroll-padding: 50px 0;
      }

  body
    h1#main_title(style='margin-top: 0.5em;')
      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(style='margin-top: 2em;')
      summary#more_theme(onclick='_evt_push("click", "normal", "more_theme")')
        h3(style='display: inline-block; margin: 0; cursor: pointer;') More theme✨
      p(style='margin: 0;') 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(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 pixelated
            td Enable pixelated mode, Enum 0/1, default is 
              code 1
            td
              input#pixelated(type='checkbox', checked, style='margin: .5rem .75rem;')
          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

      button#get(style='margin-bottom: 1em;', onclick='_evt_push("click", "normal", "get_counter")') Generate

      div
        code#code(style='visibility: hidden; display: inline-block; margin-bottom: 1em;')
        img#result(style='display: block;')

    p(style='margin-top: 2em;')
      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://unpkg.com/party-js@2/bundle/party.min.js')
    script(async, src='script.js')