<!DOCTYPE html> <html lang=“en”> <head>

<title>Pairing Matrix</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<link rel="stylesheet" href="style.css"/>
<link rel="stylesheet" href="loader.css"/>
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">

<script language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
<script language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.7.3/d3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<script language="javascript" src="matrix.js"></script>
<script language="javascript" src="index.js"></script>

</head>

<body> <div class=“visualize_matrix_container form-group form-inline”>

<div class="row">
    <div class="col-lg-offset-3 col-lg-6">
        <div class="input-group">
            <div class="input-group">
                <span class="input-group-addon" id="basic-addon2">Days</span>
                <input type="text" id="days" value="30" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
            </div>
          <span class="input-group-btn">
            <div class="btn-group">
                <button id="visualize" type="button" class="btn btn-primary">Visualize</button>
                <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <span class="caret"></span>
                    <span class="sr-only">Toggle Dropdown</span>
                </button>
                <ul class="dropdown-menu">
                    <li><a id="a_week" href="#">A Week</a></li>
                    <li><a id="two_weeks" href="#">Two Weeks</a></li>
                    <li><a id="a_month" href="#">A Month</a></li>
                    <li><a id="two_months" href="#">Two Months</a></li>
                </ul>
            </div>
          </span>
        </div>
    </div>
    <input class="cache-toggle" type="checkbox" data-toggle="toggle"
           data-on="Cache Enabled" data-off="Cache Disabled"/>
</div>

</div>

<div class=“loaderContainer”>

<div class="loader">
    <span class="dot dot_1"></span>
    <span class="dot dot_2"></span>
    <span class="dot dot_3"></span>
    <span class="dot dot_4"></span>
</div>

</div>

<span>

<div class="authors_container">
    <div class="buttons btn-group">
        <button id="reset" class="btn btn-danger">Reset</button>
        <button id="render" class="btn btn-primary">Visualize</button>
    </div>
    <div class="checkbox authors">
    </div>
</div>

<div class=“viz_container”>

<svg>
    <g class="area">
    </g>
</svg>

</div> </span> </body> </html>