doctype html
html(lang='en')
    head
        meta(charset='utf-8')
        meta(http-equiv='x-ua-compatible', content='ie=edge')
        title #{pkg.displayName} #{pkg.version} · Demo
        meta(name='description', content='demo for #{pkg.displayName} (#{pkg.homepage})')
        meta(name='viewport', content='width=device-width, initial-scale=1')
        link(rel='shortcut icon', type='image/png', href='dummy.png')
        link(rel='apple-touch-icon-precomposed', type='image/png', href='dummy.png')
        link(href='//fonts.googleapis.com/css?family=Ubuntu:300,400,700', rel='stylesheet')
        link(href='styles.css', rel='stylesheet')
        script(src='jquery-1.11.3.min.js')
        script(src='../jquery.qrcode-#{pkg.version}.js')
        script(src='scripts.js')

    body
        div#container

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

            hr
            label(for='render') RENDER MODE
            select#render
                option(value='canvas', selected='selected') canvas
                option(value='image') image
                option(value='div') div

            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='background') BACKGROUND
            input#background(type='color', value='#ffffff')
            label(for='text') CONTENT
            textarea#text #{pkg.homepage}

            hr
            label(for='minversion') MIN VERSION:
            input#minversion(type='range', value='6', 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='radius') CORNER RADIUS:
            input#radius(type='range', value='50', min='0', max='50', step='10')

        div.control.right
            label(for='mode') MODE
            select#mode
                option(value='0') 0 - Normal
                option(value='1') 1 - Label-Strip
                option(value='2', selected='selected') 2 - Label-Box
                option(value='3') 3 - Image-Strip
                option(value='4') 4 - Image-Box

            hr
            label(for='msize') SIZE:
            input#msize(type='range', value='11', 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.displayName}')
            label(for='font') FONT NAME
            input#font(type='text', value='Ubuntu')
            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')