index.jade

doctype 5
html
    head
        title= title
        link(rel='stylesheet', href='//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css')
        meta(name="viewport", content="width=device-width, initial-scale=1.0")
        style.
            // Fack you bootstrap3, nav-list is my favourite list.
            .nav-list {
                padding-left: 15px;
                padding-right: 15px;
                margin-bottom: 0;
            }
            .nav-header {
                display: block;
                padding: 3px 15px;
                font-size: 11px;
                font-weight: bold;
                line-height: 20px;
                color: hsl(0, 0%, 60%);
                text-shadow: 0 1px 0 hsla(0, 100%, 100%, 0.5);
                text-transform: uppercase;
            }
            .nav-list>li>a,
            .nav-list .nav-header {
                margin-left: -15px;
                margin-right: -15px;
                text-shadow: 0 1px 0 hsla(0, 100%, 100%, 0.5);
            }
            .nav li+.nav-header {
                margin-top: 9px;
            }
    body
        div.container
            h1.text-center= title
            hr
            div.row
                div.col-2
                    ul.nav.nav-list
                        li.nav-header

                        li.nav-header matchurls
                        li
                            small Stick a matchid in and get the replay URL. Ez.
                        li
                            hr
                        li.nav-header
                            :markdown
                                © [RJ](https://rjackson.me), PROBABLY

                div.col-6.col-offset-1.text-center
                    if error == "timeout"
                        div.alert.alert-block.alert-error.text-left
                            h4 Request took too long!
                            p This could be because:
                            ul
                                li the match ID is invalid
                                li the bot does not have access to the match ID
                                li the Dota 2 network is down
                                li or the bot is under heavy load.
                            p Double check the match ID, and try again!

                    else if error == "invalid"
                        div.alert.alert-error <strong>Invalid match id!</strong> Double check the match ID, and try again!

                    else if error == "notready"
                        div.alert.text-left <strong>Not ready!</strong> My back-end isn't ready to fetch new data. Try again in 5 minutes.

                    if replayUrl
                        if replayState == "REPLAY_AVAILABLE"
                            div.alert.alert-success <strong>Aw yis</strong> I found the replay for match #{matchid}
                            -var dlDisabled = ""

                        else if replayState == "REPLAY_NOT_RECORDED"
                            div.alert.alert-info No replay was recorded for #{matchid} :(
                            -var dlDisabled = "disabled"

                        else if replayState == "REPLAY_EXPIRED"
                            div.alert.alert-info The replay for match #{matchid} has expired. :(
                                -var dlDisabled = "disabled"

                        div.form-group
                            div.input-group
                                if dlDisabled
                                    input.form-control(type="text", value= replayUrl, disabled)
                                    span.input-group-btn
                                        a.btn.btn-primary(href= "http://www.youtube.com/watch?v=MIpPfHCe_4w&t=4") I'm disabled
                                else
                                    input.form-control(type="text", value= replayUrl)
                                    span.input-group-btn
                                        a.btn.btn-primary(href= replayUrl) DOWNLOAD
                            hr

                    form
                        div.form-group.input-group
                            input.form-control(type="text", name="matchid", placeholder="Match ID")
                            span.input-group-btn
                                button.btn.btn-primary(type="submit") Find replay

                    p <strong>The page may take a long time to load</strong> because of how the back-end gathers replay data. If you spam F5 you will be forced to fulfil /u/croatianpride's destiny.

        script(src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js")
        script(src="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js")
        script.
            (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
            })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

            ga('create', 'UA-42425997-1', 'rjackson.me');
            ga('send', 'pageview');