<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="/bulma.min.css"> <link rel="stylesheet" href="/bulma-prefers-dark.min.css"> <link rel="stylesheet" href="/style.css"> <script type="text/javascript" src="/jquery-3.4.1.min.js"></script> <script type="text/javascript" src="/filesize.min.js"></script> <title>{{ db_name }} | The milli engine</title> </head> <body> <section class="hero is-light"> <div class="hero-body"> <div class="container"> <div class="columns is-flex is-centered mb-6"> <figure class="image is-128x128"> <img id="logo-white" src="logo-white.svg" alt="milli logo in white"> <img id="logo-black" src="logo-black.svg" alt="milli logo in black"> </figure> </div> <nav class="level"> <div class="level-item has-text-centered"> <div> <p class="heading">Database Name</p> <p class="title">{{ db_name }}</p> </div> </div> <div class="level-item has-text-centered"> <div> <p class="heading">Database Size</p> <p class="title" id="db-size">{{ db_size }}</p> </div> </div> <div class="level-item has-text-centered"> <div> <p class="heading">Number of Documents</p> <p class="title" id="docs-count">{{ docs_count }}</p> </div> </div> </nav> </div> </div> </section> <section class="hero container"> <div class="notification" style="border-radius: 0 0 4px 4px;"> <nav class="level"> <!-- Left side --> <div class="level-left"> <div class="level-item"> <div class="field has-addons has-addons-right"> <input id="query" class="input" type="text" autofocus placeholder="e.g. George Clooney"> <input id="filters" class="input" type="text" placeholder="filters like released >= 1577836800"> </div> </div> <div class="level-item"></div> </div> <!-- Right side --> <nav class="level-right"> <div class="level-item has-text-centered"> <div> <p class="heading">Candidates</p> <p id="count" class="title">0</p> </div> </div> <div class="level-item has-text-centered"> </div> <div class="level-item has-text-centered"> <div> <p class="heading">Time Spent</p> <p id="time" class="title">0ms</p> </div> </div> </nav> </nav> </div> </section> <section id="results" class="container"> <div class="columns"> <div class="column is-one-fifth"> <div id="facets" class="content"> <!-- facets matching requests --> </div> </div> <div class="column is-four-fifths"> <ol id="documents" class="content"> <!-- documents matching requests --> </ol> </div> </div> </section> </body> <script type="text/javascript" src="/script.js"></script> </html>