_examples/xkcdsearch/web/index.html (52 lines of code) (raw):
<!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…</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>