start.html

<div ng-controller="HFTStartController" id="HFTStartController">
    <!--Top Data Banner-->
    <div class="top-banner">
        <table class="table" style="width:100%">
            <tr>
                <td class="status-display">Group # {{groupNum}}</td>
                <td class="status-display">Number of Traders: {{dHistory.totalTraders}}</td>
                <td class="status-display">Role: {{GetStateName()}}</td>
                <td class="status-display">Fundamental Value: {{dHistory.curFundPrice[1] | number : 2}}</td>
            </tr>
            <tr>
                <td class="status-display">Period # {{period}}</td>
                <td></td>
                <!-- <td class="status-display">Number of Makers: {{dHistory.totalMakers}} ({{dHistory.fastMakers}} fast)</td> -->
                <td class="status-display">Spread: {{GetSpread()}}</td>
                <td class="status-display">Current Buy Offer: {{dHistory.getCurrBuy() | number : 2}}</td>
            </tr>
            <tr>
                <td class="status-display">Speed Cost: {{dHistory.speedCost | number : 2}} ECUs / Second</td>
                <td class="status-display">Payoff: {{(dHistory.profit / exchangeRate) | number : 2}}ECUs </td>
                <!-- <td class="status-display">Number of Snipers: {{dHistory.totalSnipers}} ({{dHistory.fastSnipers}} fast)</td> -->
                <td class="status-display">ECUs: {{dHistory.profit | number : 2}}</td>
                 <td class="status-display">Current Sell Offer: {{dHistory.getCurrSell() | number : 2}}</td>
            </tr>    
        </table>
    </div>

    <!-- bottom of the ui -->
    <div class="row">
        <!-- graph the profit -->
        <div class="col-xs-8 profit-graph-container" style="padding: 5px">
            <svg width="100%" height="100%" id="graph2">
                <span class="zoom-in" id="profit-zoom-in" ng-class="{'zoom-disabled': tradingGraph.expandedGraph}">+</span>
                <span class="zoom-out" id="profit-zoom-out" ng-class="{'zoom-disabled': tradingGraph.expandedGraph}">-</span>
            </svg>
        </div>

        <!-- graph the experiment -->
        <div class="col-xs-6 user-graph-container" style="padding: 5px">
            <svg width="100%" height="100%" id="graph1"></svg>
        </div>

        <!-- user buttons -->
        <div class="col-xs-3 control-container" style="padding: 5px">
            <!-- roles -->
            <div class="button-container-state">
                <div class="row" style="padding-bottom:3em">
                    <button id="state_out" ng-disabled="state=='state_out'" class="btn" type="button" style="width:75px">
                        Out   
                    </button>
                </div>
                <div class="row" style="padding-bottom:3em">
                    <button id="state_snipe" ng-disabled="state=='state_snipe'" class="btn" type="button" style="width:75px">
                        Snipe
                    </button> 
                </div>
                <div class="row">
                    <button id="state_maker" ng-disabled="state=='state_maker'" class="btn" type="button" style="width:75px">
                        Maker
                    </button>
                </div>
            </div>
            <!-- speed button -->
            <div class="button-container-speed">
                <div class="speed-label" p style="font-size:15px">Speed</div>
                <div class="material-switch">
                    <input id="speed-switch" type="checkbox" ng-disabled="state=='state_out'"/>
                    <label for="speed-switch"></label>
                </div>
            </div> 
        </div>
    </div>
</div>