<!DOCTYPE html>
<html>
    <head>
        <title>IAQ dash</title>
        <link rel='stylesheet' href='static/styles/style.css'>
        <link rel='stylesheet' href='static/styles/Chart.min.css'>
        <script type='text/javascript' src='static/js/moment.min.js'></script>
        <script type='text/javascript' src='static/js/Chart.min.js'></script>
        <script type='text/javascript' src='static/js/jquery.min.js'></script>
        <script type='text/javascript' src='static/js/raphael.min.js'></script>
        <script type='text/javascript' src='static/js/justgage.min.js'></script>
    </head>
    <body>
        <div id='header_bar'>
            <h2 id='uberschrift'>Indoor enviro data</h2>
        </div>
        <div id='content_wrapper' class='column'>
            <div id='content_left' class='column'>
                <h3 id='recent_vals'>Most recent values</h3>
                <h4 id='timestamp'></h4>
                <div class='gauge_container'>
                    <div class='gauge_container_top'>
                        <div class='gauge_block'>
                            <div id='temp_gauge' class='gauge' align='center'></div>
                            <h5 align='center' class='gauge_desc'>Temperature</h5>
                        </div>
                        <div class='gauge_block'>
                            <div id='hum_gauge' class='gauge' align='center'></div>
                            <h5 align='center' class='gauge_desc'>Relative humidity</h5>
                        </div>
                    </div>
                    <div class='gauge_container_bottom'>
                        <div class='gauge_block'>
                            <div id='pres_gauge' class='gauge' align='center'></div>
                            <h5 align='center' class='gauge_desc'>Pressure</h5>
                        </div>
                        <div class='gauge_block'>
                            <div id='co2_gauge' class='gauge' align='center'></div>
                            <h5 align='center' class='gauge_desc'>CO2 concentration</h5>
                        </div>
                    </div>
                </div>
                <div id='sample_select'>
                    <form id='sample_select_form' action='/'>
                        <p>Show last <input type='number' min=1 max=10800 name='samples' placeholder='120' size=8> minutes.
                            <input type='submit' value='Select'/></p>
                    </form>
                    <p><input type='button' id='refresh' value='Refresh all'/></p>
                </div>
            </div>
            <div id='content_center' class='column'>
                <h3 class='graph_name'>Temperature</h3>
                <canvas class='graph_canvas' id='tempchart'></canvas>
                <h3 class='graph_name'>Humidity</h3>
                <canvas class='graph_canvas' id='humchart'></canvas>
            </div>
            <div id='content_right' class='column'>
                <h3 class='graph_name'>Combined</h3>
                <canvas class='graph_canvas' id='multichart'></canvas>
                <h3 class='graph_name'>CO2 concentration</h3>
                <canvas class='graph_canvas' id='co2chart'></canvas>
            </div>
        </div>
        <div id='footer_bar'>
            <p id='footer_text'>Source not online, live update disabled. Showing latest available data.</p>
        </div>

        <script type='text/javascript' src='static/js/main.js'></script>
    </body>
</html>
