doctype html
html(lang="en-gb")
    head
        meta(charset="utf-8")
        title pixsy
        link(rel="stylesheet" href="includes/style.css")
        link(rel="stylesheet" href="includes/croppie.css")
        script(src="includes/croppie.min.js")
    body
        header
            h1 pixsy
            p.
                version 0.75.0
                |
                #[a(href="http://tinybird.info/image-to-bitsy/old/" target="_blank") old version]
                |
                #[a(href="mailto:max@tinybird.info") email]
                |
                #[a(href="https://twitter.com/synth_ruiner") twitter]
        .pages
            .page#start
                p.
                    #[b pixsy] is a tool for #[a(href="http://bitsy.org/") Bitsy Game Maker]
                    that allows you to generate a room from an image and add it to your game.
                p this version is compatible with Bitsy version 7.5 and earlier.
                p.
                    #[b pixsy] does not currently work via the Itch desktop program.
                    if pixsy does not work for you, please try the
                    #[a(href="http://tinybird.info/image-to-bitsy/old/") old version] instead.
                p.
                    instructions can be found on the
                    #[a(href="https://ruin.itch.io/pixsy/") itch.io page] -
                    scroll down to "how to use".

                button.normal.pagination.next#new create a new bitsy game
                button.normal.pagination.next#load load an existing bitsy game
            .page.game-data
                h2 game data

                p.
                    your game data is available from the #[i game data] window in bitsy,
                    under the #[i tools] dropdown.

                input#game(type="file" accept=".bitsy,.txt" autocomplete="off")
                br

                textarea#game-data(
                    placeholder="Paste your game data here or use the file chooser button above"
                    autocomplete="off"
                )

                button.pagination.prev previous
                button.pagination.next#game-data-next(disabled=true) next
            .page.image#page-image
                h2 image

                .image-container
                    input#image(type="file" accept="image/*")
                    #crop(style="display: none;")

                button.pagination.prev previous
                button.pagination.next#image-next(disabled=true) next
            .page.room#page-room
                h2 room

                table
                    tbody
                        tr
                            td(style="width: 60%")
                                img#preview(alt="preview")
                                br

                                label
                                    | brightness
                                    input#brightness(type="range" min=-96 max=96 value=0)
                            td(style="vertical-align: top;")
                                label
                                    | name (optional)
                                    input#room-name(type="text" placeholder="e.g. 'bedroom'" autocomplete="off")

                                label
                                    | palette
                                    select#palette

                                #new-palette(style="display: none;")
                                    .half
                                        input#colour-background(type="color" value="#000000")
                                    .half
                                        input#colour-foreground(type="color" value="#ffffff")

                                label
                                    input#dither(type="checkbox" checked=true)
                                    | dither
                                br

                button.pagination.prev#back-to-image previous
                button.pagination.next#room-next add room
            .page.download
                h2 done!

                p#added

                textarea#output(autocomplete="off")

                button#clipboard.half copy to clipboard
                button#download.half download

                button.pagination.prev#add add another image
                button.pagination.start#reset start again
        script(type="module")
            include script.js