diff --git a/templates/index.html b/templates/index.html
index 08475f161f6e79b87bf00d8502b6f2d5cb0cea42..8baed94bcac6a8d7312dc6600e3f0447b025f737 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,45 +1,86 @@
-<!DOCTYPE HTML>
-<html>
+<!doctype html>
+<html lang="en">
<head>
- <title>Slide index</title></head>
-<body>
-<h1>Upload new slide</h1>
-<form action="upload" enctype="multipart/form-data" method="post">
- <input type="file" name="files" multiple="">
- <input type="submit" value="Upload"><br>
- Title row: <input type="number" name="title_row">
-</form>
-<ul>
- {% for item in ll %}
- <li>{{ item }}</li>
- {% endfor %}
-</ul>
+ <!-- Required meta tags -->
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-<form action="reset_index" method="post">
- <input type="submit" value="Reset Index">
-</form>
-<p>
- <a href="current_index">View example of extracted titles</a>
-</p>
+ <!-- Bootstrap CSS -->
+ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
+ integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
-<h1>Query</h1>
-<form action="search" method="post">
- <input name="term" placeholder="term"><br>
- <input name="context" placeholder="context"><br>
- <input type="button" value="Query" onclick="execute();">
-</form>
+ <title>Hello, world!</title>
+</head>
+<body>
+<div class="container">
+ <div class="row">
+ <div class="col-md">
+ <h1>Upload new PDF files</h1>
+ <form action="upload" enctype="multipart/form-data" method="post">
+ <div class="form-group">
+ <label for="fileUpload">PDF files</label>
+ <input class="form-control" type="file" lass="form-control" id="fileUpload" name="files"
+ multiple="">
+ <small id="uploadHelp" class="form-text text-muted">Select all PDF files you want to upload.</small>
+ </div>
+ <div class="form-group">
+ <label for="titleRow">Title row</label>
+ <input type="number" class="form-control" name="title_row" id="titleRow">
+ <small id="titleRowHelp" class="form-text text-muted">In which line is the title written in the
+ PDF?</small>
+ </div>
+ <input type="submit" class="btn btn-primary" value="Upload"><br>
+ </form>
+ </div>
+ <div class="col-md">
+ <h1>Indexed files</h1>
+ <ul class="list-group">
+ {% for item in ll %}
+ <li class="list-group-item">{{ item }}</li>
+ {% endfor %}
+ </ul>
+ <a href="current_index">View example of extracted titles</a>
+ <form action="reset_index" method="post">
+ <input type="submit" value="Reset Index" onclick="return confirm('Really remove complete index?');">
+ </form>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-md"><h1>Query</h1>
+ <form action="search" method="post">
+ <div class="form-group">
+ <label for="termQuery">Term</label>
+ <input name="term" id="termQuery" placeholder="Regression" class="form-control">
+ <small class="form-text text-muted">Which word do you want to search for?</small>
+ </div>
+ <div class="form-group">
+ <label for="contextQuery">Context</label>
+ <input name="context" id="contextQuery"
+ placeholder="In statistics, relationships can be examined with a regression analysis"
+ class="form-control">
+ <small class="form-text text-muted">In which context was this word used?</small>
+ </div>
+ <input type="button" class="form-control" value="Query" onclick="execute();">
+ </form>
-<div id="form-result">
+ <div id="form-result">
+ </div>
+ </div>
+ <div class="col-md">
+ <h1>Upload benchmark data</h1>
+ <form action="benchmark" enctype="multipart/form-data" method="post">
+ <div class="form-group">
+ <label for="benchmarkFile"></label>
+ <input id="benchmarkFile" class="form-control" type="file" name="file">
+ </div>
+ <input type="submit" value="Upload" class="btn btn-primary">
+ </form>
+ </div>
+ </div>
</div>
-<h1>Upload benchmark data</h1>
-<form action="benchmark" enctype="multipart/form-data" method="post">
- <input type="file" name="file">
- <input type="submit" value="Upload">
-</form>
-
<script>
function execute() {
var http = new XMLHttpRequest();
@@ -67,5 +108,14 @@
http.send(params);
}
</script>
+<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
+ integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
+ crossorigin="anonymous"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
+ integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
+ crossorigin="anonymous"></script>
+<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
+ integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
+ crossorigin="anonymous"></script>
</body>
-</html>
+</html>
\ No newline at end of file