index.pug

doctype html
head
  meta(charset='utf-8')
  title google-font-to-svg-path
  meta(name='description' content='google-font-to-svg-path')
  link(rel='shortcut icon', type='image/x-icon', href='./img/x_icon.svg')
  link(rel='stylesheet' type='text/css' href='./css/index.css')
  link(rel='stylesheet' type='text/css' href='./css/rigel/rigel.spi.min.css')
  script(src='https://maker.js.org/target/js/browser.maker.js' type='text/javascript')
  script(src='https://cdn.jsdelivr.net/npm/bezier-js@2/bezier.js')
  script(src='opentype.js' type='text/javascript')
  script(src='index.js' type='text/javascript')
  link(rel='stylesheet' href='https://cdn.jsdelivr.net/gh/mdbassit/Coloris@latest/dist/coloris.min.css')
  script(src='https://cdn.jsdelivr.net/gh/mdbassit/Coloris@latest/dist/coloris.min.js')
  script(data-ad-client='ca-pub-9656548229423934' async='' src='https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js')
.--rg--plx 
  .--rg--plx0.--head--flex
    div
      h1#heading Google Font to Svg 
    label.switch
      input#dm(type='checkbox')
      span.slider.round
    .--nav
      img(alt='GitHub forks' src='https://img.shields.io/github/forks/danmarshall/google-font-to-svg-path?color=8f8f8f&logo=github&logoColor=8f8f8f&style=for-the-badge' style='height:1.5625rem;' )
      img(alt='GitHub forks' src='https://img.shields.io/github/stars/danmarshall/google-font-to-svg-path?color=8f8f8f&logo=github&logoColor=8f8f8f&style=for-the-badge' style='height:1.5625rem;')
      img(alt='GitHub forks' src='https://img.shields.io/github/watchers/danmarshall/google-font-to-svg-path?color=8f8f8f&logo=github&logoColor=8f8f8f&style=for-the-badge' style='height:1.5625rem;')
      a(href='https://github.com/danmarshall/google-font-to-svg-path' target='_blank')
       img(alt='GitHub forks' src='https://img.shields.io/badge/Github-Repo-8f8f8f?color=8f8f8f&logo=github&logoColor=8f8f8f&style=for-the-badge' style='height:1.5625rem;')

  .--rg--plx1.--bg--top
    .--rg--grid.--rg--46
      .--flex.--col
        label Google font: 
          select#font-select.--select

        label (optional) upload font: 
          .--nav
            input#font-upload.--btn(type='file')
            button#font-upload-remove.--btn ×

        .--nav
          label variant: 
            select#font-variant.--select

          label Dxf Units: 
            select#dxf-units.--select

          label Fill rule: 
            select#input-fill-rule.--select
              option(value='evenodd') evenodd
              option(value='nonzero') nonzero

        .--nav
          .--form--group.--field.--center
            input#input-text.--form--field(type='text' value='Varb' placeholder='text' autocomplete="off" )
            label.--form--label text
          .--form--group.--field.--center
            input#input-size.input-size.--form--field(placeholder='size' autocomplete="off" type='number' value='100' )
            label.--form--label size

        .--nav
          .--form--group
            input#input-fill.input-fill.--form--field(type='text' value='#000' data-coloris='' placeholder="fill" autocomplete="off")
            label.--form--label fill

          .--form--group
            input#input-stroke.input-stroke.--form--field(type='text' value='#000' data-coloris='' autocomplete="off" placeholder="stroke")
            label.--form--label stroke 
        .--nav
          .--form--group
            input#input-bezier-accuracy.--form--field(type='text' placeholder='auto')  
            label.--form--label bezier accuracy 
          .--form--group 
            input#input-stroke-width.input-stroke-width.--form--field(type='text' value='0.25mm' placeholder="stroke width" autocomplete="off")
            label.--form--label stroke Width 

        .--nav 
          label union:
            input#input-union(type='checkbox')
          label kerning: 
            input#input-kerning(type='checkbox' checked='')

          label fill: 
            input#input-filled(type='checkbox' checked='')

          label separate characters: 
            input#input-separate(type='checkbox')

          label Non-scaling stroke: 
            input#input-stroke-non-scaling.input-stroke-non-scaling(type='checkbox' checked='')

      div 
        div(style="height:9.375rem;")
          #svg-render.--center
        .--content--center.--flex
          textarea#output-svg(readonly='')

        .--nav
          button#copy-to-clipboard-btn.--btn.--nonlink copy to clipboard
          a#download-btn.--btn.--nonlink Download Svg
          a#create-link.--btn.--nonlink Create link
          a#dxf-btn.--btn.--nonlink Download Dxf

      script(src="./js/darkmode.js")
      .sidebar
        script(async='' src='https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js')
        // vertical
        ins.adsbygoogle(style='display:block' data-ad-client='ca-pub-9656548229423934' data-ad-slot='8489021387' data-ad-format='auto' data-full-width-responsive='true')
        script.
          (adsbygoogle = window.adsbygoogle || []).push({});
input#dummy(name='dummy' type='hidden')