<!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 stylekit</title>
  <link rel="stylesheet" href="/css/bootstrap.min.css">
  <!--<link rel="stylesheet" href="/css/scada_light.css">-->
  <link rel="stylesheet" href="/css/scada_dark.css">

  <link rel="stylesheet" href="/css/stylekit.css">

  <link rel="stylesheet" href="/css/ionicons.min.css">

</head>

<body>





  <nav class="navbar navbar-expand-lg navbar-light" id="navbar">
    <!--  bg-light -->
    <a class="navbar-brand" href="#">
      <img src="/images/logo.svg" height="30" alt="Scada">
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
      aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">

        <li class="nav-item">
          <a class="nav-link" href="#">Menu Item</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Menu Item</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Menu Item</a>
        </li>
      </ul>

      <ul class="navbar-nav ml-auto">
        <li class="dropdown notifications hidden-sm-down">
          <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button">
            <i class="ion ion-alert-circled color-alert"></i>
            <span class="label-count">5</span>
          </a>


          <div class="dropdown-menu  dropdown-menu-right" aria-labelledby="navbarDropdown">
            <div class="row dropdownheader ">
              <div class="col">
                <p>Alerts</p>
              </div>
              <div class="col text-right">
                <i class="ion ion-alert-circled color-alert"></i>
              </div>
            </div>
            <div class="dropdown-divider"></div>
            <table>
              <tr class="dropdown-item">
                <td>
                  <a href="javascript:void(0);">CE04</a>
                </td>
                <td>
                  <a href="javascript:void(0);">4 hours ago</a>
                </td>
                <td>
                  <a href="javascript:void(0);">ID 181</a>
                </td>
                <td>
                  <a href="javascript:void(0);" class="color-alert">Yaw CV</a>
                </td>
              </tr>
            </table>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">View all</a>
          </div>
        </li>

        <li class="dropdown notifications hidden-sm-down">
          <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button">
            <i class="ion ion-information-circled color-warning"></i>
            <span class="label-count">5</span>
          </a>


          <div class="dropdown-menu  dropdown-menu-right" aria-labelledby="navbarDropdown">
            <div class="row dropdownheader ">
              <div class="col">
                <p>Warnings</p>
              </div>
              <div class="col text-right">
                <i class="ion ion-information-circled color-warning"></i>
              </div>
            </div>
            <div class="dropdown-divider"></div>
            <table>
              <tr class="dropdown-item">
                <td>
                  <a href="#">CE04</a>
                </td>
                <td>
                  <a href="#">4 hours ago</a>
                </td>
                <td>
                  <a href="#">ID 181</a>
                </td>
                <td>
                  <a href="#">Yaw CV</a>
                </td>
              </tr>
            </table>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">View all</a>
          </div>
        </li>






        <li class="dropdown notifications hidden-sm-down">
          <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button">
            <i class="ion ion-wrench color-service"></i>
            <span class="label-count">5</span>
          </a>


          <div class="dropdown-menu  dropdown-menu-right" aria-labelledby="navbarDropdown">
            <div class="row dropdownheader ">
              <div class="col">
                <p>Service</p>
              </div>
              <div class="col text-right">
                <i class="ion ion-wrench color-service"></i>
              </div>
            </div>
            <div class="dropdown-divider"></div>
            <table>
              <tr class="dropdown-item">
                <td>
                  <a href="#">CE04</a>
                </td>
                <td>
                  <a href="#">4 hours ago</a>
                </td>
                <td>
                  <a href="#">ID 181</a>
                </td>
                <td>
                  <a href="#">Yaw CV</a>
                </td>
              </tr>
            </table>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">View all</a>
          </div>
        </li>






        <li class="dropdown notifications hidden-sm-down">
          <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button">
            <i class="ion ion-radio-waves color-comm"></i>
            <span class="label-count">5</span>
          </a>


          <div class="dropdown-menu  dropdown-menu-right" aria-labelledby="navbarDropdown">
            <div class="row dropdownheader ">
              <div class="col">
                <p>Communications</p>
              </div>
              <div class="col text-right">
                <i class="ion ion-radio-waves color-comm"></i>
              </div>
            </div>
            <div class="dropdown-divider"></div>
            <table>
              <tr class="dropdown-item">
                <td>
                  <a href="#">CE04</a>
                </td>
                <td>
                  <a href="#">4 hours ago</a>
                </td>
                <td>
                  <a href="#">ID 181</a>
                </td>
                <td>
                  <a href="#">Yaw CV</a>
                </td>
              </tr>
            </table>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">View all</a>
          </div>
        </li>





        <li class="nav-item spacebefore">
          <a class="nav-link color-100" href="#">
            <i class="ion ion-arrow-expand"></i>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link color-100" href="#">
            <i class="ion ion-gear-b"></i>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link color-100" href="/">
            <i class="ion ion-log-out"></i>
          </a>
        </li>
      </ul>
    </div>
  </nav>
  <div class="container-fluid stylekit">
    <div class="row">
      <div class="col-3">
        <h1>Typography</h1>
      </div>
      <div class="col-9">
        <h1>This is a h1</h1>
        <br>
        <h2>This is a h2</h2>
        <br>
        <p>This is a p for paragraph text. This is a p for paragraph text. This is a p for paragraph text. This is a p for paragraph
          text. This is a p for paragraph text. </p>
      </div>
    </div>
    <div class="row">
      <div class="col-3">
        <h1>Cards</h1>
      </div>
      <div class="col-9">
        <div class="scadacard level1">Card level 1</div>
        <br>
        <div class="scadacard level2">Card level 2</div>
        <br>
      </div>
    </div>


    <div class="row">
      <div class="col-12">
        <h1>Status Card</h1>

      </div>
    </div>
    <div class="row">
      <div class="col-4">
        <div class="scadacard level1 status">
          <h1>43,414
            <span> MW</span>
          </h1>
          <h2>Current Power Production</h2>
        </div>
      </div>
      <div class="col-4">
        <div class="scadacard level1 status">
          <h1>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 class="row">
      <div class="col-12">
        <h1>Overview table</h1>

      </div>
    </div>
    <div class="row">
      <div class="col-12">
        <div class="scadacard level1">


          <div class="row">
            <div class="col-9">
              <h2>Overview</h2>
            </div>
            <div class="col-3 text-right">
              <h2 class="closeDetail" style="display:none;">X</h2>
            </div>
          </div>


          <table id="itemtable">
            <tr>
              <th class="titletd">Park</th>
              <th class="visible">Power</th>
              <th class="text-right visible">Windspeed</th>
              <th class="text-center visible">Wind Direction</th>
              <th class="visible">Status</th>
              <th class="text-center visible">Energy Factor</th>
              <th class="text-center visible">Budget</th>
              <th class="text-center visible">Availability</th>
              <th class="text-center visible">Capture Rate</th>
              <th class="actiontd">Action</th>

            </tr>

            <tr>
              <td>18 characters long…</td>

              <td class="bar visible">
                <div class="barbg">
                  <div class="bardisplay"></div>
                  <div class="barvalue">22,000 kW</div>
                </div>
              </td>
              <td class="text-right visible">5.6 m/s</td>
              <td class="text-center visible">22</td>
              <td class=" visible">
                <span class="statusdot bg-alert"></span>Comm Problem</td>
              <td class="bar visible">
                <div class="barbg">
                  <div class="bardisplay"></div>
                  <div class="barvalue">75%</div>
                </div>
              </td>
              <td class="bar visible">
                <div class="barbg">
                  <div class="bardisplay bg-blue"></div>
                  <div class="barvalue">12%</div>
                </div>
              </td>
              <td class="bar visible">
                <div class="barbg">
                  <div class="bardisplay bg-green"></div>
                  <div class="barvalue">50%</div>
                </div>
              </td>
              <td class="bar visible">
                <div class="barbg">
                  <div class="bardisplay bg-blue"></div>
                  <div class="barvalue">25%</div>
                </div>
              </td>
              <td>
                <a href="javascript:void(0);">
                  <i class="ion ion-alert-circled detailbtn"></i>
                </a>
                <a href="javascript:void(0);">
                  <i class="ion ion-alert-circled detailbtn"></i>
                </a>
                <a href="javascript:void(0);">
                  <i class="ion ion-alert-circled detailbtn"></i>
                </a>
                <a href="javascript:void(0);">
                  <i class="ion ion-alert-circled detailbtn"></i>
                </a>
                <a href="javascript:void(0);">
                  <i class="ion ion-more"></i>
                </a>
              </td>
            </tr>
            <tr>
              <td>18 characters long…</td>

              <td class="bar visible">
                <div class="barbg">
                  <div class="bardisplay"></div>
                  <div class="barvalue">22,000 kW</div>
                </div>
              </td>
              <td class="text-right visible">5.6 m/s</td>
              <td class="text-center visible">22</td>
              <td class=" visible">
                <span class="statusdot bg-alert"></span>Comm Problem</td>
              <td class="bar visible">
                <div class="barbg">
                  <div class="bardisplay"></div>
                  <div class="barvalue">75%</div>
                </div>
              </td>
              <td class="bar visible">
                <div class="barbg">
                  <div class="bardisplay bg-blue"></div>
                  <div class="barvalue">12%</div>
                </div>
              </td>
              <td class="bar visible">
                <div class="barbg">
                  <div class="bardisplay bg-green"></div>
                  <div class="barvalue">50%</div>
                </div>
              </td>
              <td class="bar visible">
                <div class="barbg">
                  <div class="bardisplay bg-blue"></div>
                  <div class="barvalue">25%</div>
                </div>
              </td>
              <td>
                <a href="javascript:void(0);">
                  <i class="ion ion-alert-circled detailbtn"></i>
                </a>
                <a href="javascript:void(0);">
                  <i class="ion ion-alert-circled detailbtn"></i>
                </a>
                <a href="javascript:void(0);">
                  <i class="ion ion-alert-circled detailbtn"></i>
                </a>
                <a href="javascript:void(0);">
                  <i class="ion ion-alert-circled detailbtn"></i>
                </a>
                <a href="javascript:void(0);">
                  <i class="ion ion-more"></i>
                </a>
              </td>
            </tr>
            <tr>
              <td>18 characters long…</td>

              <td class="bar visible">
                <div class="barbg">
                  <div class="bardisplay"></div>
                  <div class="barvalue">22,000 kW</div>
                </div>
              </td>
              <td class="text-right visible">5.6 m/s</td>
              <td class="text-center visible">22</td>
              <td class=" visible">
                <span class="statusdot bg-alert"></span>Comm Problem</td>
              <td class="bar visible">
                <div class="barbg">
                  <div class="bardisplay"></div>
                  <div class="barvalue">75%</div>
                </div>
              </td>
              <td class="bar visible">
                <div class="barbg">
                  <div class="bardisplay bg-blue"></div>
                  <div class="barvalue">12%</div>
                </div>
              </td>
              <td class="bar visible">
                <div class="barbg">
                  <div class="bardisplay bg-green"></div>
                  <div class="barvalue">50%</div>
                </div>
              </td>
              <td class="bar visible">
                <div class="barbg">
                  <div class="bardisplay bg-blue"></div>
                  <div class="barvalue">25%</div>
                </div>
              </td>
              <td>
                <a href="javascript:void(0);">
                  <i class="ion ion-alert-circled detailbtn"></i>
                </a>
                <a href="javascript:void(0);">
                  <i class="ion ion-alert-circled detailbtn"></i>
                </a>
                <a href="javascript:void(0);">
                  <i class="ion ion-alert-circled detailbtn"></i>
                </a>
                <a href="javascript:void(0);">
                  <i class="ion ion-alert-circled detailbtn"></i>
                </a>
                <a href="javascript:void(0);">
                  <i class="ion ion-more"></i>
                </a>
              </td>
            </tr>
            <tr>
              <td>18 characters long…</td>

              <td class="bar visible">
                <div class="barbg">
                  <div class="bardisplay"></div>
                  <div class="barvalue">22,000 kW</div>
                </div>
              </td>
              <td class="text-right visible">5.6 m/s</td>
              <td class="text-center visible">22</td>
              <td class=" visible">
                <span class="statusdot bg-alert"></span>Comm Problem</td>
              <td class="bar visible">
                <div class="barbg">
                  <div class="bardisplay"></div>
                  <div class="barvalue">75%</div>
                </div>
              </td>
              <td class="bar visible">
                <div class="barbg">
                  <div class="bardisplay bg-blue"></div>
                  <div class="barvalue">12%</div>
                </div>
              </td>
              <td class="bar visible">
                <div class="barbg">
                  <div class="bardisplay bg-green"></div>
                  <div class="barvalue">50%</div>
                </div>
              </td>
              <td class="bar visible">
                <div class="barbg">
                  <div class="bardisplay bg-blue"></div>
                  <div class="barvalue">25%</div>
                </div>
              </td>
              <td>
                <a href="javascript:void(0);">
                  <i class="ion ion-alert-circled detailbtn"></i>
                </a>
                <a href="javascript:void(0);">
                  <i class="ion ion-alert-circled detailbtn"></i>
                </a>
                <a href="javascript:void(0);">
                  <i class="ion ion-alert-circled detailbtn"></i>
                </a>
                <a href="javascript:void(0);">
                  <i class="ion ion-alert-circled detailbtn"></i>
                </a>
                <a href="javascript:void(0);">
                  <i class="ion ion-more"></i>
                </a>
              </td>
            </tr>

          </table>
        </div>
      </div>
    </div>

    <!-- @import "components/map.html" -->

  </div>
  <!--<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"  crossorigin="anonymous"></script>-->

  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
    crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
    crossorigin="anonymous"></script>

  <script type="text/javascript">


    $(".detailbtn").click(function () {
      $(".visible").fadeOut("slow", function () {

        $("#itemtable").animate({
          width: "300"
        }, 1000, function () {

          $(".closeDetail").fadeIn("slow", function () {

          });



        });

      });


    });


    



  </script>

</body>

</html>