doctype html
html(lang='en')
    head
        meta(charset='utf-8')
        title #{pkg.name} #{pkg.version} · Demo
        meta(name='description', content=`demo for ${pkg.name} (${pkg.homepage})`)
        meta(name='viewport', content='width=device-width, initial-scale=1')
        link(href='//fonts.googleapis.com/css2?family=Ubuntu+Mono:wght@400;700&display=swap' rel='stylesheet')
        link(href='styles.css', rel='stylesheet')
        script(src=`../${pkg.name}-${pkg.version}.min.js`)
        script(src='scripts.js')

    body
        div#container

        div.control.left
            a#banner(href=pkg.homepage) #{pkg.name} #{pkg.version}

            hr
            label(for='render') RENDER MODE
            select#render
                option(value='canvas', selected='selected') canvas
                option(value='image') image
                option(value='svg') svg
            label(for='crisp') CRISP
            select#crisp
                option(value='true', selected='selected') true
                option(value='false') false

            hr
            label(for='size') SIZE:
            input#size(type='range', value='400', min='100', max='1000', step='50')
            label(for='fill') FILL
            input#fill(type='color', value='#333333')
            label(for='back') BACK
            input#back(type='color', value='#ffffff')
            label(for='text') TEXT
            textarea#text #{pkg.homepage}

            hr
            label(for='minversion') MIN VERSION:
            input#minversion(type='range', value='1', min='1', max='10', step='1')
            label(for='eclevel') ERROR CORRECTION LEVEL
            select#eclevel
                option(value='L') L - low (7%)
                option(value='M') M - medium (15%)
                option(value='Q') Q - quartile (25%)
                option(value='H', selected='selected') H - high (30%)
            label(for='quiet') QUIET ZONE:
            input#quiet(type='range', value='1', min='0', max='4', step='1')
            label(for='rounded') ROUNDED CORNERS:
            input#rounded(type='range', value='100', min='0', max='100', step='10')

        div.control.right
            label(for='mode') MODE
            select#mode
                option(value='plain') plain
                option(value='label', selected='selected') label
                option(value='image') image

            hr
            label(for='msize') SIZE:
            input#msize(type='range', value='20', min='0', max='40', step='1')
            label(for='mposx') POS X:
            input#mposx(type='range', value='50', min='0', max='100', step='1')
            label(for='mposy') POS Y:
            input#mposy(type='range', value='50', min='0', max='100', step='1')

            hr
            label(for='label') LABEL
            input#label(type='text', value=pkg.name)
            label(for='font') FONT NAME
            input#font(type='text', value='Ubuntu Mono')
            label(for='fontcolor') FONT COLOR
            input#fontcolor(type='color', value='#ff9818')

            hr
            label(for='image') IMAGE
            input#image(type='file')

        img#img-buffer(src='dummy.png')