<!DOCTYPE html>
<html><head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
<title>NMEA 2000 Gateway</title>

<script type="text/javascript" src="index.js"></script>  
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="main">
<h1>NMEA 2000 Gateway </h1>
<div class="row">
  <span class="label">connected</span>
  <span class="value" id="connected"></span>
</div>
<div id="tabs">
  <div class="tab active" data-page="statusPage">Status</div>
  <div class="tab" data-page="configPage">Config</div>
  <div class="tab" data-page="dashboardPage">Data</div>
</div>
<div id="statusPage" class="tabPage">
  <div id="statusPageContent">
    <div class="row">
      <span class="label">VERSION</span>
      <span class="value" id="version">---</span>
      <button class="infoButton" id="converterInfo">?</button>
    </div>

    <div class="row even">
      <span class="label">Access Point IP</span>
      <span class="value" id="apIp">---</span>
    </div>
    <div class="row ">
      <span class="label">wifi client connected</span>
      <span class="value" id="wifiConnected">---</span>
    </div>
    <div class="row even">
      <span class="label">wifi client IP</span>
      <span class="value" id="clientIP">---</span>
    </div>
    <div class="row">
      <span class="label"># TCP clients</span>
      <span class="value" id="numClients">---</span>
    </div>  
  </div>
  <button id="reset">Reset</button>
</div>
<div class="configForm tabPage hidden" id="configPage" >
  <div class="configFormRows">

  </div>
  <div class="buttons">
    <button id="resetForm">ReloadConfig</button>
    <button id="changeConfig">Save&Restart</button>
    <button id="factoryReset">FactoryReset</button>
  </div>
</div>
<div class="tabPage hidden" id="dashboardPage">

</div>

</div>
<div class="overlayContainer hidden" id="overlayContainer">
  <div id="overlay">
    <div id="overlayContent">
      AHA
    </div>
    <div class="overlayButtons">
      <button id="hideOverlay">Close</button>
    </div>
  </div>
</div>
</body>
</html>