example-apps/openai-embeddings/views/search.hbs (95 lines of code) (raw):
<!DOCTYPE html>
<html>
<head>
<title>Elastic OpenAI integration - Node.js/Express example</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f1f5f9;
color: #333;
}
table {
width: 100%;
margin-top: 20px;
border-collapse: separate;
border-spacing: 0;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}
th, td {
border: 1px solid #dee2e6;
padding: 15px;
text-align: left;
}
th {
background-color: #0d6efd;
color: white;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
tr:nth-child(even) {
background-color: #e9ecef;
}
tr:nth-child(odd) {
background-color: #f8f9fa;
}
input[type='text'] {
width: 90%;
padding: 15px;
border-radius: 15px;
border: none;
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
margin: 10px 0;
}
input[type='button'] {
padding: 15px 30px;
font-size: medium;
border-radius: 15px;
border: none;
background-color: #0d6efd;
color: white;
cursor: pointer;
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
}
input[type='button']:hover {
background-color: #0b5ed7;
}
</style>
<script lang="javascript">
function search() {
const query = document.getElementById("query").value;
const searchUrl = new URL(`/search`, document.location);
searchUrl.searchParams.append('q', query);
location.href = searchUrl.href;
}
</script>
</head>
<body>
<table>
<tr>
<td>
<input id="query" type="text" {{#if query}} value="{{query}}" {{/if}} style="font-size: 18px; padding: 10px; border-radius: 5px; border: none; box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1); margin: 10px 0;" onkeydown="if(event.key === 'Enter') search()"/>
<input type="button" onclick="search()" value="Search"/>
</td>
</tr>
</table>
{{#if query}}
<div style="margin: 20px 0; padding: 10px; background-color: #dee2e6; color: #000000; border-radius: 10px; box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);">
<h2 style="margin: 0; font-size: 20px;">Results for <strong><i>"{{query}}"</i></strong></h2>
</div>
{{/if}}
<table id="navigation">
<tr>
<th>Text</th>
<th>Relevance</th>
</tr>
{{#each hits}}
<tr>
<td>
<b><a href="{{this.url}}">{{this.title}}</a></b><br/>{{this.content}}
</td>
<td>{{this.score}}</td>
</tr>
{{/each}}
</table>
</body>
</html>