<!DOCTYPE html>
<!-- vim: set ts=2 sw=2 et tw=80: -->

<html>
  <head>
    <title>Image Search IR System - Claudio Maggioni</title>
    <meta charset="utf-8" />
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Fira+Sans&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="./style.css"/>
  </head>

  <body>
    <nav>
      <div class="title">
        <h1>Image Search IR System - By Claudio Maggioni</h1>
      </div>
      <div class="searchbox">
        <form id="form">
          <input type="text" id="q" placeholder="Search..."/>
        </form>
      </div>
    </nav>
    <main>
      <div id="visualization"></div>
      <div id="docs">
        <div style="grid-column: 1 / calc(var(--columns) + 1);
                    text-align: center; padding: 2em;
                    background: #CCC;">
          Input your query in the search box above and then press Enter.
          Result clustering will appear on the left sidebar.
        </div>
      </div>
      <template id="document">
        <div class="document" id="doc{{ id }}">
          <a class="img_box" href="{{ url }}" target="_blank"
            style="background-image: url({{ url }})"/></a>
          <div class="description">
          <h2>{{ title }}</h2>
          <h3>By {{ author }}</h3>
          {{ description }}</div>
        </div>
      </template>
    </div>
    <script src="./carrotsearch.foamtree.js"></script>
    <script src="./search.js"></script>
  </body>
</html>`
