index.html

---
layout: default
title: trainnotifier.co.uk
menu: <li class="active"><a>Home</a></li><li><a href="route/">Routes</a></li><li><a href="http://www.whattrain.co.uk/" target="_blank">Stations</a></li><li><a href="ppm/">PPM</a></li><li><a href="about/">About</a></li>
js:    
    - src: app/tocs.js
    - src: app/index.js
---

<div class="row">
    <div class="col-md-6 col-xs-12 col-sm-12">
        <form>
            <div class="input-group input-group-sm">
                <span class="input-group-addon">From:&nbsp;<span class="glyphicon glyphicon-search"></span></span>
                <input type="text" class="form-control station-lookup" id="from-crs" autocomplete="off" placeholder="Type from station name here" />
                <span class="input-group-addon">
                    <a class="dropdown-toggle" id="from-local-link" data-toggle="dropdown" onclick="lookupLocalFrom(); return false;" href="#">Local</a>
                    <ul class="dropdown-menu" role="menu" id="from-local" aria-labelledby="from-local-link" data-bind="foreach: $data">
                        <li><a data-bind="text: $data, attr: { onclick: '$(\'#from-crs\').val(\'' + $data + '\'); return false;' }" href="#"></a></li>
                    </ul>
                    &nbsp;
                    <span class="glyphicon glyphicon-map-marker"></span>
                </span>
            </div>
            <br />
            <div class="input-group input-group-sm">
                <span class="input-group-addon">To:&nbsp;<span class="glyphicon glyphicon-search"></span></span>
                <input type="text" class="form-control station-lookup" id="to-crs" autocomplete="off" placeholder="Type to station name here" />
                <span class="input-group-addon">
                    <a class="dropdown-toggle" id="to-local-link" data-toggle="dropdown" onclick="lookupLocalTo(); return false;" href="#">Local</a>
                    <ul class="dropdown-menu" role="menu" id="to-local" aria-labelledby="to-local-link" data-bind="foreach: $data">
                        <li><a data-bind="text: $data, attr: { onclick: '$(\'#to-crs\').val(\'' + $data + '\'); return false;' }" href="#"></a></li>
                    </ul>
                    &nbsp;
                    <span class="glyphicon glyphicon-map-marker"></span>
                </span>
            </div>
            <br />
            <div class="input-group input-group-sm">
                <span class="input-group-addon">At:&nbsp;<span class="glyphicon glyphicon-search"></span></span>
                <input type="text" class="form-control station-lookup" id="at-crs" autocomplete="off" placeholder="Type calling at station name here" />
                <span class="input-group-addon">
                    <a class="dropdown-toggle" id="at-local-link" data-toggle="dropdown" onclick="lookupLocalAt(); return false;" href="#">Local</a>
                    <ul class="dropdown-menu" role="menu" id="at-local" aria-labelledby="at-local-link" data-bind="foreach: $data">
                        <li><a data-bind="text: $data, attr: { onclick: '$(\'#at-crs\').val(\'' + $data + '\'); return false;' }" href="#"></a></li>
                    </ul>
                    &nbsp;
                    <span class="glyphicon glyphicon-map-marker"></span>
                </span>
            </div>
            <br />
            <div class="input-group input-group-sm" style="width:100%;">
                <span class="input-group-addon">On:&nbsp;<span class="glyphicon glyphicon-calendar"></span></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;<span class="glyphicon glyphicon-time"></span></span>
                <input type="time" class="form-control" id="time-picker" />
            </div>
            <br />
            <div class="input-group input-group-sm" style="width:100%;">
                <span class="input-group-addon">Operator:&nbsp;<span class="glyphicon glyphicon-transfer"></span></span>
                <select class="form-control" id="tocs" data-bind="foreach: $data">
                    <option data-bind="text: name, attr: { value: code }"></option>
                </select>
            </div>
            <br />
            <p>
                <input type="submit" class="btn btn-primary" value="Search" />
                <button type="submit" id="nearest" class="btn btn-info">Find Nearest Train</button>
            </p>
        </form>
    </div>
</div>
<div class="row">
    <div class="col-sm-12 info-text">
        Search For Trains:
        <ul>
            <li>Starting From: a location</li>
            <li>Calling From: a location, To: a location (Direct Services Only)</li>
            <li>To: a location (terminate at location)</li>
            <li>At: a location (call at location en route)</li>
            <li>By: A Specific Operator or Freight only</li>
        </ul>
        Find Nearest Train:
        <ul>
            <li>Looks for nearest trains to your current location</li>
        </ul>
    </div>
</div>