<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Welcome to Kiwix Server</title>
    <script
      type="text/javascript"
      src="{{root}}/skin/jquery-ui/external/jquery/jquery.js"
    ></script>
    <script
      type="text/javascript"
      src="{{root}}/skin/jquery-ui/jquery-ui.min.js"
    ></script>
    <link
      type="text/css"
      href="{{root}}/skin/jquery-ui/jquery-ui.min.css"
      rel="Stylesheet"
    />
    <link
      type="text/css"
      href="{{root}}/skin/jquery-ui/jquery-ui.theme.min.css"
      rel="Stylesheet"
    />
    <link
      type="text/css"
      href="{{root}}/skin/index.css"
      rel="Stylesheet"
    />
    <style>
      @font-face {
        font-family: "poppins";
        src: url("{{root}}/skin/fonts/Poppins.ttf") format("truetype");
      }

      @font-face {
          font-family: "roboto";
          src: url("{{root}}/skin/fonts/Roboto.ttf") format("truetype");
      }
    </style>
    <script src="{{root}}/skin/isotope.pkgd.min.js" defer></script>
    <script src="{{root}}/skin/iso6391To3.js"></script>
    <script type="text/javascript" src="{{root}}/skin/index.js" defer></script>
  </head>
  <body>
    <div class='kiwixNav'>
      <div class="kiwixNav__filters">
        <div class="kiwixNav__select">
          <select name="lang" id="languageFilter" class='kiwixNav__kiwixFilter filter'>
            <option value="" selected>All languages</option>
          </select>
        </div>
        <div class="kiwixNav__select">
          <select name="category" id="categoryFilter" class='kiwixNav__kiwixFilter filter'>
            <option value="" selected>All categories</option>
          </select>
        </div>
      </div>
      <form id='kiwixSearchForm' class='kiwixNav__SearchForm'>
        <input type="text" name="q" placeholder="Search" id="searchFilter" class='kiwixSearch filter'>
        <input type="submit" class="searchButton" value="Search"/>
      </form>
    </div>
    <div class="kiwixHomeBody">
      <h3 class="kiwixHomeBody__results"></h3>
      <div class="book__list"></div>
      <div id="fadeOut" class="fadeOut"></div>
    </div>
    <div class="loader" style="position: absolute; top: 50%"><div class="loader-spinner"></div></div>
    <div id="kiwixfooter" class="kiwixfooter">Powered by&nbsp;<a href="https://kiwix.org">Kiwix</a></div>
  </body>
  <script>
    function closeModal() {
      for(modal of document.getElementsByClassName('modal-wrapper')) {
        modal.remove();
      }
    }
  </script>
</html>
