benchlab-pytools 3.0.0__py3-none-any.whl

benchlab/vu/VU-Server/www/views/api_keys.html

@@ -0,0 +1,151 @@
+        <!-- Page header -->
+        <div class="page-header d-print-none">
+          <div class="container-xl">
+            <div class="row g-2 align-items-center">
+              <div class="col">
+                <!-- Page pre-title -->
+                <div class="page-pretitle">
+                  Overview
+                </div>
+                <h2 class="page-title">
+                  API Keys
+                </h2>
+              </div>
+              <!-- Page title actions -->
+              <div class="col-auto ms-auto d-print-none">
+                <div class="btn-list">
+                  <a href="#" class="btn btn-primary d-none d-sm-inline-block" data-bs-toggle="modal" data-bs-target="#createNewKeyModal">
+                    <!-- Download SVG icon from http://tabler-icons.io/i/plus -->
+                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 5l0 14" /><path d="M5 12l14 0" /></svg>
+                    Create new API key
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+
+        <!-- Page body -->
+        <div class="page-body">
+          <div class="container-xl">
+            <div class="row row-deck row-cards">
+
+              <div class="col-12">
+                <div class="card">
+                  <div class="card-header">
+                    <h3 class="card-title">VU1 API Keys</h3>
+                  </div>
+                  <div class="table-responsive">
+                    <table class="table card-table table-vcenter text-nowrap datatable" id="table_api_keys">
+                      <thead>
+                        <tr>
+                          <th class="w-1"></th>
+                          <th>Key name</th>
+                          <th>API Key</th>
+                          <th></th>
+                        </tr>
+                      </thead>
+                      <tbody></tbody>
+                    </table>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+
+<!-- Add new profile modal -->
+<div class="modal modal-blur fade" id="createNewKeyModal" tabindex="-1" role="dialog" aria-hidden="true">
+      <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title">Create new API key</h5>
+            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+          </div>
+          <div class="modal-body">
+
+            <div class="mb-3">
+              <label class="form-label">Key Name</label>
+              <input type="text" class="form-control" id="modal-new-key-name" name="modal-new-key-name" placeholder="Name the key to recognize it easier">
+            </div>
+
+            <div id="modal-ranges">
+
+                <div class="mb-3">
+                  <div class="mb-3" id="modal-select-header">Select one or more dials that this API key will be able to control</div>
+                  <div class="form-selectgroup" id="modal-dials-list">
+
+                  </div>
+                </div>
+
+                <div class="mb-3">
+            <a href="#" class="btn btn-primary ms-auto" id="modal-select-all">
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-select-all" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                   <path d="M8 8m0 1a1 1 0 0 1 1 -1h6a1 1 0 0 1 1 1v6a1 1 0 0 1 -1 1h-6a1 1 0 0 1 -1 -1z"></path>
+                   <path d="M12 20v.01"></path>
+                   <path d="M16 20v.01"></path>
+                   <path d="M8 20v.01"></path>
+                   <path d="M4 20v.01"></path>
+                   <path d="M4 16v.01"></path>
+                   <path d="M4 12v.01"></path>
+                   <path d="M4 8v.01"></path>
+                   <path d="M4 4v.01"></path>
+                   <path d="M8 4v.01"></path>
+                   <path d="M12 4v.01"></path>
+                   <path d="M16 4v.01"></path>
+                   <path d="M20 4v.01"></path>
+                   <path d="M20 8v.01"></path>
+                   <path d="M20 12v.01"></path>
+                   <path d="M20 16v.01"></path>
+                   <path d="M20 20v.01"></path>
+                </svg>
+              Select all dials
+            </a>
+
+            <a href="#" class="btn btn-primary ms-auto" id="modal-deselect-all">
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-deselect" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                   <path d="M12 8h3a1 1 0 0 1 1 1v3"></path>
+                   <path d="M16 16h-7a1 1 0 0 1 -1 -1v-7"></path>
+                   <path d="M12 20v.01"></path>
+                   <path d="M16 20v.01"></path>
+                   <path d="M8 20v.01"></path>
+                   <path d="M4 20v.01"></path>
+                   <path d="M4 16v.01"></path>
+                   <path d="M4 12v.01"></path>
+                   <path d="M4 8v.01"></path>
+                   <path d="M8 4v.01"></path>
+                   <path d="M12 4v.01"></path>
+                   <path d="M16 4v.01"></path>
+                   <path d="M20 4v.01"></path>
+                   <path d="M20 8v.01"></path>
+                   <path d="M20 12v.01"></path>
+                   <path d="M20 16v.01"></path>
+                   <path d="M3 3l18 18"></path>
+                </svg>
+              Select none
+            </a>
+                </div>
+
+            </div>
+
+          </div>
+          <div class="modal-footer">
+            <a href="#" class="btn btn-link link-secondary" data-bs-dismiss="modal">
+              Cancel
+            </a>
+            <a href="#" class="btn btn-primary ms-auto" id="modal-add-new-key">
+              <!-- Download SVG icon from http://tabler-icons.io/i/plus -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 5l0 14" /><path d="M5 12l14 0" /></svg>
+              Create new API key
+            </a>
+          </div>
+        </div>
+      </div>
+    </div> <!-- end Add new profile modal -->
+
+
+<script src="assets/js/vu1_gui_api_keys.js" defer></script>

benchlab/vu/VU-Server/www/views/dial.html

@@ -0,0 +1,286 @@
+
+        <!-- Page header -->
+        <div class="page-header d-print-none">
+          <div class="container-xl">
+            <div class="row g-2 align-items-center">
+              <div class="col">
+                <!-- Page pre-title -->
+                <div class="page-pretitle">
+                  Dial
+                </div>
+                <h2 class="page-title" id="dial-settings">
+                    Settings
+                </h2>
+              </div>
+            </div>
+          </div>
+        </div>
+
+
+        <!-- Page body -->
+        <div class="page-body">
+          <div class="container-xl">
+            <div class="row row-deck row-cards">
+
+              <!-- Dial information -->
+              <div class="col-12">
+                <div class="card">
+                  <div class="card-header">
+                    <h3 class="card-title" id="dial-title">??</h3>
+                  </div>
+                  <div class="card-body">
+
+                    <div class="datagrid">
+                      <div class="datagrid-item">
+                        <div class="datagrid-title">Dial Status</div>
+                        <div class="datagrid-content">
+                          <span class="status status-green">
+                            Online
+                          </span>
+                        </div>
+                      </div>
+                      <div class="datagrid-item">
+                        <div class="datagrid-title">Dial UID</div>
+                        <div class="datagrid-content user-select-all" id="dial-uid">??</div>
+                      </div>
+                      <div class="datagrid-item">
+                        <div class="datagrid-title">Dial Generation</div>
+                        <div class="datagrid-content">VU1</div>
+                      </div>
+                      <div class="datagrid-item">
+                        <div class="datagrid-title">Dial Type</div>
+                        <div class="datagrid-content" id="dial-type"></div>
+                      </div>
+                      <div class="datagrid-item">
+                        <div class="datagrid-title">Firmware Version</div>
+                        <div class="datagrid-content user-select-all" id="dial-fw-version"></div>
+                      </div>
+                      <div class="datagrid-item">
+                        <div class="datagrid-title">Firmware Build</div>
+                        <div class="datagrid-content user-select-all" id="dial-fw-build"></div>
+                      </div>
+                      <div class="datagrid-item">
+                        <div class="datagrid-title">Hardware Revision</div>
+                        <div class="datagrid-content user-select-all" id="dial-hw-version"></div>
+                      </div>
+                      <div class="datagrid-item">
+                        <div class="datagrid-title">Protocol Version</div>
+                        <div class="datagrid-content user-select-all" id="dial-protocol-version"></div>
+                      </div>
+
+                      <div class="datagrid-item">
+                        <div class="datagrid-title">Needle Update Period</div>
+                        <div class="datagrid-content">Every <span id="dial-easing-period"></span> ms</div>
+                      </div>
+                      <div class="datagrid-item">
+                        <div class="datagrid-title">Max Needle Step Per Period</div>
+                        <div class="datagrid-content"><span id="dial-easing-step"></span> %</div>
+                      </div>
+                      <div class="datagrid-item">
+                        <div class="datagrid-title">Backlight Update Period</div>
+                        <div class="datagrid-content">Every <span id="backlight-easing-period"></span> ms</div>
+                      </div>
+                      <div class="datagrid-item">
+                        <div class="datagrid-title">Max Backlight Step Per Period</div>
+                        <div class="datagrid-content"><span id="backlight-easing-step"></span> %</div>
+                      </div>
+                      <div class="datagrid-item">
+                        <div class="datagrid-title"></div>
+                        <div class="datagrid-content"></div>
+                      </div>
+                      <div class="datagrid-item">
+                        <div class="datagrid-title"></div>
+                        <div class="datagrid-content"></div>
+                      </div>
+                      <div class="datagrid-item">
+                        <div class="datagrid-title"></div>
+                        <div class="datagrid-content"></div>
+                      </div>
+                      <div class="datagrid-item">
+                        <div class="datagrid-title">Re-read FW&HW information</div>
+                        <div class="datagrid-content" id="dial-reload-container">
+                            <a href="#" class="btn btn-icon" aria-label="Button" id="dial-reload-info" data-bs-toggle="tooltip" data-bs-placement="top" title="Query the dial for firmware and hardware information. (These values are then cached on the server)">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-refresh-alert" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                               <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                               <path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path>
+                               <path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path>
+                               <path d="M12 9l0 3"></path>
+                               <path d="M12 15l.01 0"></path>
+                            </svg>
+                            </a>
+                        </div>
+                      </div>
+
+                    </div>
+
+                  </div>
+                </div> <!-- Dial information -->
+
+              </div>
+
+
+            <!-- Dial setting -->
+            <div class="col-12">
+                <div class="row row-cards">
+
+                <div class="col-sm-6 col-lg-3">
+                <div class="card">
+                  <div class="card-header">
+                    <h3 class="card-title">Dial Background</h3>
+                  </div>
+                  <div class="card-body">
+                        <div class="dial-background-container">
+                            <img id="dial-background-img" width="200" height="144" class="border" />
+                        </div>
+                  </div>
+                </div>
+                </div>
+
+
+                <div class="col-sm-6 col-lg-3">
+                <div class="card">
+                  <div class="card-header">
+                    <h3 class="card-title">Set dial name</h3>
+                  </div>
+                  <div class="card-body">
+
+                    <div class="mb-3">
+                      <div class="row g-2">
+                        <div class="col">
+                          <input type="text" class="form-control" id="new-dial-name" placeholder="New dial name" />
+                        </div>
+                        <div class="col-auto">
+                          <a href="#" class="btn btn-icon" aria-label="Button" id="btn-change-name">
+
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-corner-down-left-double" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+   <path d="M19 5v6a3 3 0 0 1 -3 3h-7"></path>
+   <path d="M13 10l-4 4l4 4m-5 -8l-4 4l4 4"></path>
+</svg>
+                          </a>
+                        </div>
+                      </div>
+                    </div>
+
+                    <div id="dial-name-rules" style="display: none;">
+                        <p>Dial name should be between 3 and 30 characters long</p>
+                        <p>It should contain only <br>Letters `A-Z`<br>Numbers `0-9`<br>Dash `-`<br>Underscore `_`<br>Space ` `</p>
+                    </div>
+
+                    <div id="dial-server-issue" style="display: none;">
+                        <p>Server reports dial is unavailable. Please check if your dial is connected and restart VU server.</p>
+                        <p>Sever message: <span id="dial-server-issue-message"></span></p>
+                    </div>
+
+                  </div>
+                </div>
+                </div>
+
+
+                <div class="col-sm-6 col-lg-3">
+                <div class="card">
+                  <div class="card-header">
+                    <h3 class="card-title">Identify dial
+<span class="form-help" data-bs-toggle="popover" data-bs-placement="top" data-bs-html="true" data-bs-title="How does this feaure work?" data-bs-content="<p class='mb-1'>You can use this feature to physically identify which dial you are configuring by setting it's background to red, green, blue or off.</p><p class='mb-1'>Then you can take a look at your dials and confirm which dial you are configuring.</p><p class='mb-1'>p.s. Make sure dial is not being activelly controlled by another application because that will overwrite the effect of these buttons.</p>">?</span>
+                    </h3>
+
+                  </div>
+                  <div class="card-body">
+                        <button type="button" class="btn btn-red vu1-identify-button"
+                            data-sk-red="100"
+                            data-sk-green="0"
+                            data-sk-blue="0"
+                            data-sk-value="50"
+                            data-bs-toggle="tooltip"
+                            data-bs-placement="top"
+                            title="Dial will be set to 50% and RED background color.">Red</button>
+
+                        <button type="button" class="btn btn-green vu1-identify-button"
+                            data-sk-red="0"
+                            data-sk-green="100"
+                            data-sk-blue="0"
+                            data-sk-value="50"
+                            data-bs-toggle="tooltip"
+                            data-bs-placement="top"
+                            title="Dial will be set to 50% and GREEN background color.">Green</button>
+
+                        <button type="button" class="btn btn-blue vu1-identify-button"
+                            data-sk-red="0"
+                            data-sk-green="0"
+                            data-sk-blue="100"
+                            data-sk-value="50"
+                            data-bs-toggle="tooltip"
+                            data-bs-placement="top"
+                            title="Dial will be set to 50% and BLUE background color.">Blue</button>
+
+                        <button type="button" class="btn btn-black vu1-identify-button"
+                            data-sk-red="0"
+                            data-sk-green="0"
+                            data-sk-blue="0"
+                            data-sk-value="0"
+                            data-bs-toggle="tooltip"
+                            data-bs-placement="top"
+                            title="Dial will be set to 0% and background color will be turned off.">Off</button>
+                  </div>
+                </div>
+                </div>
+
+                <!-- <div class="col-sm-6 col-lg-3"></div> -->
+
+
+                <div class="col-sm-6 col-lg-3">
+                <div class="card">
+                  <div class="card-header">
+                    <h3 class="card-title">Dial behaviour
+                        <span class="form-help"
+                            data-bs-toggle="popover"
+                            data-bs-placement="top"
+                            data-bs-html="true"
+                            data-bs-title="What is dial 'behaviour'?"
+                            data-bs-content="<p class='mb-1'>These are presets that configure how fast or slow the needle moves and how fast or slow the background color changes.</p><p class='mb-1'>This affects how responsive or smooth the dial 'feels'.</p><p class='mb-1'>Each application controlling the dial can configure this option with fine grain detail.</p>">?</span>
+                    </h3>
+
+                  </div>
+                  <div class="card-body">
+                        <button type="button" class="btn vu1-behaviour-button"
+                            data-bs-toggle="tooltip"
+                            data-bs-placement="top"
+                            title="Dial is very responsive but it will overshoot or 'oscillate' on large value changes."
+                            data-sk-dial-period="50"
+                            data-sk-dial-step="20"
+                            data-sk-backlight-period="50"
+                            data-sk-backlight-step="20">Responsive</button>
+
+                        <button type="button" class="btn vu1-behaviour-button"
+                            data-bs-toggle="tooltip"
+                            data-bs-placement="top"
+                            title="Balance between responsive and smooth dial"
+                            data-sk-dial-period="50"
+                            data-sk-dial-step="5"
+                            data-sk-backlight-period="50"
+                            data-sk-backlight-step="10">Balanced</button>
+
+                        <button type="button" class="btn vu1-behaviour-button"
+                            data-bs-toggle="tooltip"
+                            data-bs-placement="top"
+                            title="Dial is slowly moving to target value with minimum overshot or oscillation."
+                            data-sk-dial-period="50"
+                            data-sk-dial-step="1"
+                            data-sk-backlight-period="50"
+                            data-sk-backlight-step="5">Smooth</button>
+
+                  </div>
+                </div>
+                </div>
+
+
+              </div> <!-- Card row -->
+          </div> <!-- Dial setting -->
+
+
+
+        </div> <!-- Card row -->
+    </div> <!-- Container -->
+</div> <!-- Page body -->
+
+<script src="assets/js/vu1_gui_dial.js" defer></script>

benchlab/vu/VU-Server/www/views/footer.html

@@ -0,0 +1,27 @@
+        <footer class="footer footer-transparent d-print-none">
+          <div class="container-xl">
+            <div class="row text-center align-items-center flex-row-reverse">
+              <div class="col-lg-auto ms-lg-auto">
+                <ul class="list-inline list-inline-dots mb-0">
+                  <li class="list-inline-item"><a href="https://vudials.com" target="_blank" class="link-secondary">VU Dials Home</a></li>
+                  <li class="list-inline-item"><a href="https://docs.vudials.com" target="_blank" class="link-secondary" rel="noopener">Documentation</a></li>
+                  <li class="list-inline-item"><a href="https://github.com/SasaKaranovic/vu1-server" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
+                </ul>
+              </div>
+              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
+                <ul class="list-inline list-inline-dots mb-0">
+                  <li class="list-inline-item">
+                    Copyright &copy; 2024
+                    <a href="." class="link-secondary">Karanovic Research / Streacom</a>.
+                    All rights reserved.
+                  </li>
+                  <li class="list-inline-item">
+                    <a href="#" class="link-secondary" rel="noopener">
+                      v{{VU_VERSION}}
+                    </a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </footer>

benchlab/vu/VU-Server/www/views/header.html

@@ -0,0 +1,86 @@
+      <!-- Navbar -->
+      <header class="navbar navbar-expand-md d-print-none" >
+        <div class="container-xl">
+          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu" aria-controls="navbar-menu" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+          </button>
+          <h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
+            <a href=".">
+              <img src="assets/img/header.png" width="110" height="32" alt="VU1 API Server" class="navbar-brand-image">
+            </a>
+          </h1>
+          <div class="navbar-nav flex-row order-md-last">
+            <div class="nav-item d-none d-md-flex">
+              <div class="btn-list">
+
+          <div class="d-none d-md-flex">
+              <a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip"
+           data-bs-placement="bottom">
+                <!-- Download SVG icon from http://tabler-icons.io/i/moon -->
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
+              </a>
+              <a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip"
+           data-bs-placement="bottom">
+                <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
+              </a>
+          </div>
+
+                <a href="https://vudials.com" class="btn" target="_blank" rel="noreferrer">
+                  <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
+                  VU1 Home
+                </a>
+                <a href="https://docs.vudials.com" class="btn" target="_blank" rel="noreferrer">
+                  <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
+                  Documentation
+                </a>
+              </div>
+            </div>
+
+
+
+          </div>
+
+
+
+
+        </div>
+      </header>
+
+      <header class="navbar-expand-md">
+        <div class="collapse navbar-collapse" id="navbar-menu">
+          <div class="navbar">
+            <div class="container-xl">
+              <ul class="navbar-nav">
+                <li class="nav-item" id="nav-home">
+                  <a class="nav-link" href="/" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/home -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l-2 0l9 -9l9 9l-2 0" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Home
+                    </span>
+                  </a>
+                </li>
+                <li class="nav-item" id="nav-api">
+                  <a class="nav-link" href="/index.html?page=api_keys" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/ghost -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-key" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+   <path d="M16.555 3.843l3.602 3.602a2.877 2.877 0 0 1 0 4.069l-2.643 2.643a2.877 2.877 0 0 1 -4.069 0l-.301 -.301l-6.558 6.558a2 2 0 0 1 -1.239 .578l-.175 .008h-1.172a1 1 0 0 1 -.993 -.883l-.007 -.117v-1.172a2 2 0 0 1 .467 -1.284l.119 -.13l.414 -.414h2v-2h2v-2l2.144 -2.144l-.301 -.301a2.877 2.877 0 0 1 0 -4.069l2.643 -2.643a2.877 2.877 0 0 1 4.069 0z"></path>
+   <path d="M15 9h.01"></path>
+</svg>
+                    </span>
+                    <span class="nav-link-title">
+                      API Keys
+                    </span>
+                  </a>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </header>
+