
<!DOCTYPE HTML><html>
<head>
  <title>NateChrony</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" href="data:,">
  <link rel="manifest" href="/manifest.json">
  <link rel="stylesheet" href="w3.css">
  
  <style>
  html {
    text-align: center;
  }
  h2{
    color: black;
  }
  p{
    margin-block-start: 0.1em;
    margin-block-end:   0.1em;    
  }
  .content {
    padding:5px;
    margin:0 auto;
  }
  .card {
    background-color: #F8F7F9;;
    box-shadow:  2px 2px 12px 1px rgba(140,140,140,.5);
    padding-top:2px;
    padding-bottom:  2px;
  }
  .button {
    padding: 2px 10px;
    font-size: 18px;
    text-align:center;
    outline: none;
    color:  #fff;
    background-color: #0652a3;
    border: none;
    border-radius: 2px;
   }
   .button:active {
     background-color: #0f8b8d;
     box-shadow: 2 2px #CDCDCD;
     transform: translateY(2px);
   }  
   .state {
     font-size: 1rem;
     color: black;
     font-weight:   bold;
   }
   .statesml {
     font-size: 0.8rem;
     color: black;
     font-weight:   bold;
	 vertical-align: top;	 
   }   
   .center {
      margin-left: auto;
      margin-right: auto;
    }
	 .table, th, td {
    border: 1px solid;
	  border-color: #dfdfdf;
	  padding-left: 2px;
	  padding-right:  2px;
	}
  </style>

<title>NateChrony</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="data:,">
<link rel="stylesheet" href="w3.css">
</head>
<body>

<div class="w3-bar w3-light-grey">
  <div class="w3-dropdown-hover">
    <button class="w3-button">Menu</button>
    <div class="w3-dropdown-content w3-bar-block w3-card-4">
      <a href="/" class="w3-bar-item w3-button">Shoot</a>
	  <a href="/graph" class="w3-bar-item w3-button">Graph</a> 
%steadymenu1%
	  <a href="/shoot_as" class="w3-bar-item w3-button">Shoot AirSoft</a>
	  <a href="/graph_as" class="w3-bar-item w3-button">Graph AirSoft</a> 
      <a href="/setup" class="w3-bar-item w3-button">Setup</a>
	  <a href="/wifi" class="w3-bar-item w3-button">Wi-Fi Setup</a> 
	  <a href="/mini" class="w3-bar-item w3-button">Mini Shoot</a> 

	  <a href="/shootdata" class="w3-bar-item w3-button">Shoot Data</a> 	  
%steadymenu2%
	  <a href="/airsoftdata" class="w3-bar-item w3-button">AirSoft Data</a>
	  <a href="/help" class="w3-bar-item w3-button">Help</a> 
	  
    </div>
  </div>
  <img height="30" align=center src="logo.webp"></img>

</div>

  <div class="content">

    <div class="card">
	  <B><p style="color:red"><span id="autosave">%autosave%</span></p></B>

      <div id="imperial">
        <h2><span id="fps">%fps%</span> fps</h2>
        <h2><span id="powerF">%powerF%</span> fpe</h2>
      </div>
      <div id="metric">  
        <h2><span id="mps">%mps%</span> m/sec</h2>
        <h2><span id="powerJ">%powerJ%</span> Joules</h2>
      </div>  

      <p class="state">Pellet Weight: <span id="pelletWeight">%pelletWeight%</span></p>
      <p class="state">Shot Count: <span id="shotCount">%shotCount%</span></p>
      <p class="state">Desc: <span id="comment">%comment%</span></p>

      <div id="imperial1">
        <table class="center">
          <tr>
            <td></td> 
            <td><h2><p class="state">min</h2></td>
            <td><h2><p class="state">max</h2></td> 
            <td><h2><p class="state">avg</h2></td> 
            <td><h2><p class="state">spread</h2></td> 
            <td><h2><p class="state">std dev</h2></td>
          </tr>          <tr>
            <td><h2><p class="state">fps</p></h2></td>
            <td><h2><p class="state"><span id="minFps">%minFps%</span></p></h2></td>
            <td><h2><p class="state"><span id="maxFps">%maxFps%</span></p></h2></td>
            <td><h2><p class="state"><span id="avgFps">%avgFps%</span></p></h2></td>
            <td><h2><p class="state"><span id="spreadFps">%spreadFps%</span></p></h2></td>
            <td><h2><p class="state"><span id="stddevFps">%stddevFps%</span></p></h2></td>
          </tr>
          <tr>
            <td><h2><p class="state">fpe</p></h2></td>
            <td><h2><p class="state"><span id="minPowerF">%minPowerF%</span></p></h2></td>
            <td><h2><p class="state"><span id="maxPowerF">%maxPowerF%</span></p></h2></td>
            <td><h2><p class="state"><span id="avgPowerF">%avgPowerF%</span></p></h2></td> 
            <td><h2><p class="state"><span id="spreadPowerF">%spreadPowerF%</span></p></h2></td>
            <td><h2><p class="state"><span id="stddevPowerF">%stddevPowerF%</span></p></h2></td>
          </tr>
        </table>
      </div>

      <div id="metric1">
        <table class="center">
          <tr>
            <td></td> 
            <td><h2><p class="state">min</h2></td>
            <td><h2><p class="state">max</h2></td> 
            <td><h2><p class="state">avg</h2></td> 
            <td><h2><p class="state">spread</h2></td> 
            <td><h2><p class="state">std dev</h2></td>
          </tr>      
          <tr>
            <td><h2><p class="state">m/sec</p></h2></td>
            <td><h2><p class="state"><span id="minMps">%minMps%</span></p></h2></td>
            <td><h2><p class="state"><span id="maxMps">%maxMps%</span></p></h2></td>
            <td><h2><p class="state"><span id="avgMps">%avgMps%</span></p></h2></td>
            <td><h2><p class="state"><span id="spreadMps">%spreadMps%</span></p></h2></td>
            <td><h2><p class="state"><span id="stddevMps">%stddevMps%</span></p></h2></td>
          </tr>
          <tr>
            <td><h2><p class="state">Joules</p></h2></td>
            <td><h2><p class="state"><span id="minPowerJ">%minPowerJ%</span></p></h2></td>
            <td><h2><p class="state"><span id="maxPowerJ">%maxPowerJ%</span></p></h2></td>
            <td><h2><p class="state"><span id="avgPowerJ">%avgPowerJ%</span></p></h2></td>
            <td><h2><p class="state"><span id="spreadPowerJ">%spreadPowerJ%</span></p></h2></td>
            <td><h2><p class="state"><span id="stddevPowerJ">%stddevPowerJ%</span></p></h2></td>
          </tr>
        </table>
      </div>

      <p><button id="saveshotscur" class="button">Save Shots</button>&nbsp<button id="clearshots" class="button">Clear Shots</button>&nbsp<button id="clearlast" class="button">Clear Last</button></p>

      <div id="imperial2">
        <table class="center">
          <tr>
            <td><h2><p class="state">Shot #</h2></td>
            <td><h2><p class="state">fps</h2></td>
            <td><h2><p class="state">fpe</h2></td>
          </tr>
          <tr>
            <td><p class="state"><span id="shotCounter">%shotCounter%</span></h2></td>
            <td><p class="state"><span id="shotsFps">%shotsFps%</span></h2></td>
            <td><p class="state"><span id="powersF">%powersF%</span></h2></td>
          </tr>
        </table>
      </div>

      <div id="metric2">
        <table class="center">
          <tr>
            <td><h2><p class="state">Shot #</h2></td>
            <td><h2><p class="state">m/sec</h2></td>
            <td><h2><p class="state">Joules</h2></td>
          </tr>
          <tr>
            <td><p class="state"><span id="shotCounter1">%shotCounter1%</span></h2></td>
            <td><p class="state"><span id="shotsMps">%shotsMps%</span></h2></td>
            <td><p class="state"><span id="powersJ">%powersJ%</span></h2></td>
          </tr>
        </table>
      </div>

      <button onclick="saveShots(1)" class="button">Save1</button>
      <button onclick="saveShots(2)" class="button">Save2</button>
      <button onclick="saveShots(3)" class="button">Save3</button>
      <button onclick="saveShots(4)" class="button">Save4</button>

      <div id="imperial3">
        <table class="center">
          <tr>
			<td></td>
            <td><h2><p class="statesml">S1 fps</h2></td>
            <td><h2><p class="statesml">S2 fps</h2></td>
            <td><h2><p class="statesml">S3 fps</h2></td>
            <td><h2><p class="statesml">S4 fps</h2></td>

            <td><h2><p class="statesml">S1 fpe</h2></td>
            <td><h2><p class="statesml">S2 fpe</h2></td>
            <td><h2><p class="statesml">S3 fpe</h2></td>
            <td><h2><p class="statesml">S4 fpe</h2></td>
          </tr>
          <tr>
			<td class="statesml">Min<BR>Max<BR>Avg<BR>Sprd<BR>StdDev<BR>-<BR>Shot<BR>String</td>
            <td class="statesml"><span id="shotsFps1">%shotsFps1%</span></td>
            <td class="statesml"><span id="shotsFps2">%shotsFps2%</span></td>
            <td class="statesml"><span id="shotsFps3">%shotsFps3%</span></td>
            <td class="statesml"><span id="shotsFps4">%shotsFps4%</span></td>

            <td class="statesml"><span id="powersF1">%powersF1%</span></td>
            <td class="statesml"><span id="powersF2">%powersF2%</span></td>
            <td class="statesml"><span id="powersF3">%powersF3%</span></td>
            <td class="statesml"><span id="powersF4">%powersF4%</span></td>
          </tr>
        </table>
      </div>

      <div id="metric3">
        <table class="center">
          <tr>
			<td></td>
            <td><h2><p class="statesml">S1 mps</h2></td>
            <td><h2><p class="statesml">S2 mps</h2></td>
            <td><h2><p class="statesml">S3 mps</h2></td>
            <td><h2><p class="statesml">S4 mps</h2></td>

            <td><h2><p class="statesml">S1 J</h2></td>
            <td><h2><p class="statesml">S2 J</h2></td>
            <td><h2><p class="statesml">S3 J</h2></td>
            <td><h2><p class="statesml">S4 J</h2></td>
          </tr>
          <tr>
		    <td class="statesml">Min<BR>Max<BR>Avg<BR>Sprd<BR>StdDev<BR>-<BR>Shot<BR>String</td>
            <td class="statesml"><span id="shotsMps1">%shotsMps1%</span></td>
            <td class="statesml"><span id="shotsMps2">%shotsMps2%</span></td>
            <td class="statesml"><span id="shotsMps3">%shotsMps3%</span></td>
            <td class="statesml"><span id="shotsMps4">%shotsMps4%</span></td>

            <td class="statesml"><span id="powersJ1">%powersJ1%</span></td>
            <td class="statesml"><span id="powersJ2">%powersJ2%</span></td>
            <td class="statesml"><span id="powersJ3">%powersJ3%</span></td>
            <td class="statesml"><span id="powersJ4">%powersJ4%</span></td>
          </tr>
        </table>
      </div>

      <button onclick="clearShots(1)" class="button">Clear1</button>
      <button onclick="clearShots(2)" class="button">Clear2</button>
      <button onclick="clearShots(3)" class="button">Clear3</button>
      <button onclick="clearShots(4)" class="button">Clear4</button>

	  <B><p style="color:red"><span id="airsoft">%airsoft%</span></p></B>
    </div>
  </div>