_examples/xkcdsearch/web/index.html

<!DOCTYPE html>
<html>
<head>
    <title>xkcdsearch</title>
    <link href="data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQEAYAAABPYyMiAAAABmJLR0T///////8JWPfcAAAACXBIWXMAAABIAAAASABGyWs+AAAAF0lEQVRIx2NgGAWjYBSMglEwCkbBSAcACBAAAeaR9cIAAAAASUVORK5CYII="
          rel="icon" type="image/x-icon">
    <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="app" v-bind:class="{loading:state.loading}" v-cloak>
    <div id="search-form">
        <form v-on:submit.prevent="">
            <input placeholder="Search..." size="50" type="text" v-model.lazy="query">
        </form>
        <p class="total"><span class="label"># results/</span><span class="content">{{ total }}</span></p>
    </div>

    <div class="no-results" v-if="total < 1 && !state.loading">
        <p>Sorry, no results for your query&hellip;</p>
    </div>

    <div :key="result.id" class="result" v-bind:id="result.id" v-for="result in results">
        <h2>
            <span class="title" v-html="result.title"></span>
            <span class="published">/{{ result.published }}/</span>
        </h2>
        <div class="highlights">
            <p class="alt" v-show="result.alt">
                <span class="label">Alt/</span>
                <span class="content" v-html="result.alt"></span>
            </p>
            <p class="transcript" v-show="result.transcript">
                <span class="label">Transcript/</span>
                <span class="content" v-html="result.transcript"></span>
            </p>
        </div>
        <a v-bind:href="result.url" v-bind:title="result.alt">
            <img v-bind:alt="result.alt" v-bind:src="result.image_url" v-on:mouseout="toggle($event)"
                 v-on:mouseover="toggle($event)">
        </a>
    </div>
    <p id="loading-results" v-show="state.fetching">Loading results...</p>

    <p id="loading-app" v-show="state.loading">Loading the application...</p>
    <p id="app-error" v-if="state.error">[{{ state.error.status }}] {{ state.error.statusText }}</p>
</div>

<a href="https://github.com/elastic/go-elasticsearch/tree/master/_examples/xkcd"
   style="position: fixed; top: 0; right: 0; border: 0; display: inline-block;"
   title="See the source code at GitHub"><img alt="" height="50px" src="/assets/images/github-ribbon.svg" width="50px"></a>

<a href="https://xkcd.com/license.html" style="position: fixed; bottom: 0; right: 0; border: 0; display: inline-block;"><img
        height="15px" src="https://mirrors.creativecommons.org/presskit/buttons/80x15/png/by-nc.png"></img></a>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
<script src="/application.js"></script>
</body>
</html>