epub-full-text-search
Version:
148 lines (140 loc) • 7.66 kB
HTML
<html>
<head lang="en">
<meta charset="UTF-8">
<title>EPUB search demo</title>
<link rel="stylesheet prefetch"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css">
<link href='http://fonts.googleapis.com/css?family=Oleo+Script' rel='stylesheet' type='text/css'>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script
src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
crossorigin="anonymous"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
<link href="main.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="theme-showcase" role="main">
<div class="">
<h1 align="center">EPUB Search</h1>
<div id="exTab3" class="mainContainer">
<ul class="nav nav-tabs">
<li class="active"><a href="#real" data-toggle="tab">Use-case cloudreader</a></li>
<li><a href="#pre" data-toggle="tab">Preindexing</a></li>
<li><a href="#fly" data-toggle="tab">Indexing on-the-fly</a></li>
</ul>
<div class="tab-content clearfix">
<div class="tab-pane" id="pre">
<h4>Sample books preindexed:</h4>
<ul>
<li>Accessible EPUB 3</li>
<li>A First Course in Linear Algebra</li>
</ul>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">E.g. search for math, epub, someone, ...</h3>
</div>
<div class="panel-body">
<form class="form-search form-inline">
<div class="input-group">
<input type="text" id="searchbox" name="searchbox" class="form-control search-query"
placeholder="Search" data-provide="typeahead"/>
<span class="input-group-btn">
<button id="search"
type="button"
class="btn btn-default"
data-loading-text="<i class='fa fa-circle-o-notch fa-spin'></i> Processing">Search</button>
</span>
</div>
</form>
</div>
</div>
<div id="alert_placeholder"></div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 id="hitsCount" class="panel-title">Hits</h3>
</div>
<div id="hits" class="list-group">
</div>
</div>
</div>
<div class="tab-pane" id="fly">
<h3>On-the-fly indexing</h3>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Add URL to EPUB </h3>
</div>
<div class="panel-body">
<form class="form-search form-inline">
<div class="input-group">
<input type="text" id="url" name="indexUrl" class="form-control search-query"
placeholder="URL"/>
<span class="input-group-btn">
<button id="indexUrl"
type="button"
class="btn btn-default"
data-loading-text="<i class='fa fa-circle-o-notch fa-spin'></i> Processing">Index Url</button>
</span>
</div>
</form>
</div>
</div>
</div>
<div class="tab-pane active" id="real">
<h4>EPUB search modus: "on-the-fly"</h4>
<p>Demo is using readium cloud reader <a href="https://readium.firebaseapp.com">https://readium.firebaseapp.com</a>
</p>
<div id="readiumWrapper">
<iframe id="readium1"></iframe>
</div>
<div id="searchControl" data-loading-text="<i class='fa fa-circle-o-notch fa-spin'></i> Processing">
<div class="panel panel-default ">
<div class="panel-heading panel-heading-custom">
<h3 class="panel-title">Open an ebook to indexing it "on-the-fly". If the index-process
is ready then you can search within the ebook.</h3>
</div>
<div class="panel-body">
<div id="duration"></div>
<form class="form-search form-inline">
<div class="input-group">
<input type="text" id="searchbox1" name="searchbox"
class="form-control search-query"
placeholder="Search" data-provide="typeahead"/>
<span class="input-group-btn">
<button id="search1"
type="button"
class="btn btn-default"
data-loading-text="<i class='fa fa-circle-o-notch fa-spin'></i> Processing">Search</button>
</span>
</div>
</form>
</div>
</div>
<div class="listWrapper">
<ul id="results" class="list-group" style="list-style-type:lower-greek;">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="controller.js"></script>
</html>