<!DOCTYPE html>
<html lang="en">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta name="description" content="">
  <meta name="author" content="">

  <title>Scada Oneview 4.0 alpha</title>
  <link rel="stylesheet" href="/css/bootstrap.min.css">
  <!--<link rel="stylesheet" href="/css/scada_light.css">-->
  <link id="pagestyle" rel="stylesheet" href="/css/scada_dark.css">
  <link rel="stylesheet" href="/css/scadaicons.css">
  <link rel="stylesheet" href="/css/ionicons.min.css">
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.js"></script>
  <script src="/js/bootstrap.bundle.min.js"></script>

</head>

<body>
  <!-- @import "components/nav.html" -->
  <div class="container-fluid">
    <!-- @import "components/settings_bar.html" -->
    <div class="row">
      <div class="col-6" id="crumbs">
        <h1>Monitor</h1>
        <ul>
          <li>
            <a href="/">
              <i class="icon icon-home"></i>
            </a>
          </li>
          <li>
            <a href="#">Monitor</a>
          </li>
          <li>
            <a href="#">Breadcrumb</a>
          </li>
          <li class="dropdown notifications hidden-sm-down">
            TB03
            <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button"></a>
            <div class="dropdown-menu  " aria-labelledby="navbarDropdown">
              <a href="#">TB01</a>
              <a href="#">TB02</a>
              <a href="#" class="active">TB03</a>
              <a href="#">TB04</a>
              <a href="#">TB05</a>
              <a href="#">TB06</a>
              <a href="#">TB07</a>
              <a href="#">TB08</a>
              <a href="#">TB09</a>
              <a href="#">TB10</a>
            </div>
          </li>
        </ul>
      </div>
      <div class="col-6">
        <div class="row">
          <div class="col-4">
            <div class="scadacard level1 status">
              <h1 class="color-power">43,414
                <span> MW</span>
              </h1>
              <h2>Power Production</h2>
            </div>
          </div>
          <div class="col-4">
            <div class="scadacard level1 status">
              <h1 class="color-wind">7
                <span> m/s</span>
              </h1>
              <h2>Wind Speed</h2>
            </div>
          </div>
          <div class="col-4">
            <div class="scadacard level1 status">
              <h1>7.3&deg;
                <span> C</span>
              </h1>
              <h2>External temperature</h2>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-12">
        <div class="scadacard level1" id="monitorwrapper">
          Content
        </div>
      </div>
    </div>
  </div>
  <script src="/js/screenfull-min.js"></script>
  <script src="/js/oneview_V1_0-min.js"></script>
</body>
</html>