index.html

---
layout: default
title: traindelay.co.uk
menu: <li class="active"><a>Home</a></li><li><a href="about/">About</a></li>
js:
    - src: app/index-page.js
---

<div class="row">
    <div class="col-xs-12">
        <h1>{{ site.name }}</h1>
        <p class="info-text">
            Search historical records of the UK National Rail Network (currently dating back 14 days) to see if your train was delayed. <small>(Direct trains only)</small>
        </p>
    </div>
</div>
<div class="row">
    <div class="col-md-6 col-sm-12 col-xs-12 ">
        <form>
            <div class="input-group input-group-sm">
                <span class="input-group-addon">From:&nbsp;<i class="fa fa-search"></i></span>
                <input type="text" class="form-control station-lookup stationName" id="from-crs" autocomplete="off" placeholder="Type from station name here" />
                <div class="input-group-btn">
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false" onclick="lookupLocalFrom(); return false;">Local <i class="fa fa-location-arrow"></i></button>
                    <ul class="dropdown-menu dropdown-menu-right" role="menu" id="from-local">
                        <li><a href="#"><i class="fa fa-spin fa-refresh"></i></a></li>
                        <!-- ko foreach: $data -->
                        <li>
                            <a data-bind="attr: { onclick: '$(\'#from-crs\').val(\'' + $data + '\'); return false;' }" href="#">
                                <i class="fa fa-train"></i>&nbsp;<span data-bind="text: $data"></span>
                            </a>
                        </li>
                        <!-- /ko -->
                    </ul>
                </div>
            </div>
            <br />
            <div class="input-group input-group-sm">
                <span class="input-group-addon">To:&nbsp;<i class="fa fa-search"></i></span>
                <input type="text" class="form-control station-lookup stationName" id="to-crs" autocomplete="off" placeholder="Type to station name here" />

                <div class="input-group-btn">
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false" onclick="lookupLocalTo(); return false;">Local <i class="fa fa-location-arrow"></i></button>
                    <ul class="dropdown-menu dropdown-menu-right" role="menu" id="to-local">
                        <li><a href="#"><i class="fa fa-spin fa-refresh"></i></a></li>
                        <!-- ko foreach: $data -->
                        <li>
                            <a data-bind="attr: { onclick: '$(\'#to-crs\').val(\'' + $data + '\'); return false;' }" href="#">
                                <i class="fa fa-train"></i>&nbsp;<span data-bind="text: $data"></span>
                            </a>
                        </li>
                        <!-- /ko -->
                    </ul>
                </div>
            </div>
            <br />
            <div class="input-group input-group-sm" style="width:100%;">
                <span class="input-group-addon">On:&nbsp;<i class="fa fa-calendar"></i></span>
                <input type="date" class="form-control" id="date-picker" />
            </div>
            <br />
            <div class="input-group input-group-sm" style="width:100%;">
                <span class="input-group-addon">At:&nbsp;<i class="fa fa-clock-o"></i></span>
                <input type="time" class="form-control" id="time-picker" />
            </div>
            <br />
            <p>
                <button type="submit" class="btn btn-primary">Find</button>
            </p>
        </form>
    </div>
</div>