<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8"/>
    <meta name="description" content="OwlBoard - Live train departures for traincrew."/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="application-name" content="OwlBoard">
    <meta name="author" content="Frederick Boniface">
    <meta name="theme-color" content="#155bb7">
    <link rel="stylesheet" type="text/css" href="./styles/main.css"/>
    <link rel="stylesheet" type="text/css" href="./styles/settings.css"/>
    <link rel="icon" type="image/svg+xml" href="./images/icon.svg"/>
    <link rel="manifest" type="application/json" href="./manifest.json"/>
    <title>OwlBoard - Settings</title>
    <script src="./js/lib.main.js" defer></script>
    <script src="./js/settings.js" defer></script>
  </head>

  <body>
    <div id="loading">
      <div class="spinner">
      </div>
      <p>Loading</p>
    </div>

    <div id="done">
      <!-- Insert white tick SVG Here -->
      <picture id="save-icon">
        <source srcset="./images/nav/save.svg" type="image/svg+xml">
        <img src="./images/nav/save-59.png" alt="">
      </picture>
      <p>Saved</p>
    </div>

    <div id="top_button" class="hide_micro">
      <button aria-label="Back" class="sidebar_control" onclick="history.back()">&#8678;</button>
    </div>

    <picture>
      <source srcset="/images/logo/wide_logo.svg" type="image/svg+xml">
      <source media="(max-height: 739px)" srcset="/images/logo/logo-full-200.png" type="image/png">
      <source srcset="/images/logo/logo-full-250.png" type="image/png">
      <img class="titleimg" src="/images/logo/logo-full-250.png" alt="OwlBoard Logo">
    </picture>
    <h2>Settings</h2>
      <p>Any settings you apply will only apply to the device you are using now.</p>

      <label>Personal Quick Links:</label><br>
        <p>Enter one CRS/3ALPHA code per box</p>
        <input type="text" maxlength="3" id="ql0" name="ql0" autocomplete="off" class="small-lookup-box">
        <input type="text" maxlength="3" id="ql1" name="ql1" autocomplete="off" class="small-lookup-box"><br>
        <input type="text" maxlength="3" id="ql2" name="ql2" autocomplete="off" class="small-lookup-box">
        <input type="text" maxlength="3" id="ql3" name="ql3" autocomplete="off" class="small-lookup-box"><br>
        <input type="text" maxlength="3" id="ql4" name="ql4" autocomplete="off" class="small-lookup-box">
        <input type="text" maxlength="3" id="ql5" name="ql5" autocomplete="off" class="small-lookup-box"><br>
        <input type="text" maxlength="3" id="ql6" name="ql6" autocomplete="off" class="small-lookup-box">
        <input type="text" maxlength="3" id="ql7" name="ql7" autocomplete="off" class="small-lookup-box"><br>
        <input type="text" maxlength="3" id="ql8" name="ql8" autocomplete="off" class="small-lookup-box">
        <input type="text" maxlength="3" id="ql9" name="ql9" autocomplete="off" class="small-lookup-box"><br>
        <input type="text" maxlength="3" id="ql10" name="ql10" autocomplete="off" class="small-lookup-box">
        <input type="text" maxlength="3" id="ql11" name="ql11" autocomplete="off" class="small-lookup-box"><br>
        <button onclick="setQl()" class="lookup-button">Apply</button>
        <button onclick="clearQl()" class="lookup-button">Defaults</button>

  </body>
</html>