index.jade

doctype html
html(lang='en')
    head
        meta(charset='utf-8')
        title
        link(rel='stylesheet', type='text/css', href='min-css/normalize.min.css')
        link(rel='stylesheet', type='text/css', href='min-css/magnify.min.css')
        link(rel='stylesheet', type='text/css', href='min-css/style.min.css')
        link(rel='stylesheet', type='text/css', href='min-css/jquery-ui.min.css')
        script(src='min-js/jquery-3.1.0.min.js', defer)
        // dragging and resizing
        script(src='min-js/jquery-ui.min.js', defer)
        // color animations
        script(src='min-js/jquery.color-2.1.2.min.js', defer)
        // ease-out animations
        script(src='js/jquery-easing-1.3.js', defer)
        // magnify images
        script(src='js/magnify.js', defer)
        script(src='js/script.js', defer)
    body
        header
            h2 Try to Draw a Box Around Every Person and Vehicle
        main
            #settings
                section.setting#color
                    #person Person
                    input#color1(type='color', value='#ffff00')
                    #automobile Automobile
                    input#color2(type='color', value='#9900ff')
                section.setting#borderWidth
                    #onePX 1px
                    #twoPX 2px
                section.setting#dragClick
                    #drag Drag
                    #clickAndDrag Click&Drag
                section.setting#magnifyIcon
                section.setting#countBoxes 0
            #image
                img.zoom(data-magnify-src='streets.jpg')
            #buttons
                for val in ['submit', 'undo', 'cancel']
                    input(type='button', id=val, value=val)
        footer
            p Best supported on a computer with Chrome, Opera, or Firefox.