diff --git a/swh/web/ui/templates/includes/home-directory.html b/swh/web/ui/templates/includes/home-directory.html
new file mode 100644
--- /dev/null
+++ b/swh/web/ui/templates/includes/home-directory.html
@@ -0,0 +1,111 @@
+<div class="simple-search">
+ <div class="row simple-desc container-fluid">
+ Search a directory according to its SHA1 checksum
+ </div>
+ <form method="get" action="{{ url_for('search_directory') }}">
+ <div class="row">
+ <div class="col-md-6 required">
+ <label for="dir-sha1">Directory ID</label>
+ <div class="input-group">
+ <input id="dir-sha1" class="form-control"
+ type="text" placeholder="directory git SHA1"
+ name="sha1_git" required="true"/>
+ <span class="input-group-btn">
+ <button class="btn btn-primary" type="submit">
+ <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
+ </button>
+ </span>
+ <a class="input-group-addon" data-toggle="collapse" href="#dir-dir-collapse">Options</a>
+ </div>
+ </div>
+ <div class="col-md-6">
+ <div id="dir-dir-collapse" class="collapse">
+ <label for="dir-path-1">Path within directory</label>
+ <input id="dir-path-1" class="optional form-control"
+ type="text" placeholder="path" name="path/">
+ </div>
+ </div>
+ </div>
+ </form>
+</div>
+<hr/>
+<div class="text-center">
+ <a data-toggle="collapse" href="#dir-advanced-search">Advanced search</a>
+</div>
+<div id="dir-advanced-search" data-toggle="collapse" class="collapse advanced-search">
+ <div class="row advanced-desc container-fluid">
+ You can also refer to a directory either:
+ <ul>
+ <li>
+ as a request for the content of a revision identified in absolute
+ terms by its git SHA1.
+ </li>
+ <li>
+ as a request for the content of a revision matching a
+ given time and place, with place the origin of the directory (and optionally its
+ branch name), and time a timestamp of when we collected it (or as close to the
+ timestamp as we can provide).
+ </li>
+ </ul>
+ In all cases, you may also specify a path within the top-level directory to which you
+ would like the results to be constrained.
+ </div>
+ <div>
+ <form method="get" action="{{ url_for('search_directory') }}">
+ <div class="forms-group row">
+ <div class="col-md-6 required">
+ <label for="dir-rev-sha1">Revision ID</label>
+ <div class="input-group">
+ <input id="dir-rev-sha1" class="form-control"
+ type="text" placeholder="revision git SHA1"
+ name="sha1_git" required="true"/>
+ <span class="input-group-btn">
+ <button class="btn btn-primary" type="submit">
+ <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
+ </button>
+ </span>
+ <a class="input-group-addon" data-toggle="collapse" href="#dir-rev-collapse">Options</a>
+ </div>
+ </div>
+ <div class="col-md-6">
+ <div id="dir-rev-collapse" class="collapse">
+ <label for="dir-path-2">Path within directory</label>
+ <input id="dir-path-2" class="optional form-control"
+ type="text" placeholder="path" name="dir_path"/>
+ </div>
+ </div>
+ </div>
+ </form>
+ <form method="get" action="{{ url_for('search_directory') }}">
+ <div class="form-groups row">
+ <div class="col-md-6">
+ <label for="dir-origin-id">Origin ID</label>
+ <div class="input-group">
+ <input id="dir-origin-id" class="form-control"
+ type="text" placeholder="origin id"
+ name="origin_id" required="true"/>
+ <span class="input-group-btn">
+ <button class="btn btn-primary" type="submit">
+ <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
+ </button>
+ </span>
+ <a class="input-group-addon" data-toggle="collapse" href="#dir-origin-collapse">Options</a>
+ </div>
+ </div>
+ <div class="col-md-6">
+ <div id="dir-origin-collapse" class="collapse">
+ <label for="dir-branchname">Branch name</label>
+ <input id="dir-branchname" class="optional form-control"
+ type="text" placeholder="refs/heads/master" name="branch_name"/>
+ <label for="dir-timestamp">Timestamp</label>
+ <input id="dir-timestamp" class="optional form-control"
+ type="text" placeholder="timestamp" name="ts"/>
+ <label for="dir-path-3">Path within the directory</label>
+ <input id="dir-path-3" class="optional form-control"
+ type="text" placeholder="path" name="path"/>
+ </div>
+ </div>
+ </div>
+ </form>
+ </div>
+</div>
diff --git a/swh/web/ui/templates/includes/home-origin.html b/swh/web/ui/templates/includes/home-origin.html
new file mode 100644
--- /dev/null
+++ b/swh/web/ui/templates/includes/home-origin.html
@@ -0,0 +1,57 @@
+<div class="simple-search">
+ <div class="row simple-desc container-fluid">
+ Search an origin according to its SWH ID
+ </div>
+ <form method="get" action="{{ url_for('search_directory') }}">
+ <div class="row">
+ <div class="col-md-12">
+ <label>Origin ID</label>
+ <div class="input-group">
+ <input class="form-control" type="text" placeholder="directory git SHA1" name="sha1_git" required="true"/>
+ <span class="input-group-btn">
+ <button class="btn btn-primary" type="submit">
+ <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
+ </button>
+ </span>
+ </div>
+ </div>
+ </div>
+ </form>
+</div>
+<hr/>
+<div class="text-center">
+ <a data-toggle="collapse" href="#origin-advanced-search">Advanced search</a>
+</div>
+<div id="origin-advanced-search" data-toggle="collapse" class="collapse advanced-search">
+ <div class="row advanced-desc container-fluid">
+ You can also refer to a directory in a relative manner, as the combination of the type of origin (git, debian, tarball...)
+ and the URL at which the origin is located.
+ </div>
+ <div>
+ <form method="get" action="{{ url_for('search_origin') }}">
+ <div class="forms-group row">
+ <div class="col-md-12">
+ <div class="input-group multi-input-group">
+ <label for="origin-type">Origin type</label>
+ <input id="origin-type"
+ class="form-control"
+ type="text" placeholder="origin type"
+ name="origin_type" required="true"/>
+ <div class="input-group-field">
+ <label for="origin-url">Origin URL</label>
+ <input id="origin-url"
+ class="form-control"
+ type="text" placeholder="origin url"
+ name="origin_url" required="true"/>
+ </div>
+ <span class="input-group-btn">
+ <button id="origin-dummy-btn" class="btn btn-primary" type="submit">
+ <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
+ </button>
+ </span>
+ </div>
+ </div>
+ </div>
+ </form>
+ </div>
+</div>
diff --git a/swh/web/ui/templates/includes/home-revision.html b/swh/web/ui/templates/includes/home-revision.html
new file mode 100644
--- /dev/null
+++ b/swh/web/ui/templates/includes/home-revision.html
@@ -0,0 +1,66 @@
+<div class="simple-search">
+ <div class="row simple-desc container-fluid">
+ Search a revision according to its SHA1 identifier
+ </div>
+ <form method="get" action="{{ url_for('search_revision') }}">
+ <div class="row">
+ <div class="col-md-12">
+ <label for="rev-sha1">Revision SHA1</label>
+ <div class="input-group">
+ <input id="rev-sha1" class="form-control"
+ type="text" placeholder="git SHA1"
+ name="sha1_git" required="true"/>
+ <span class="input-group-btn">
+ <button class="btn btn-primary" type="submit">
+ <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
+ </button>
+ </span>
+ </div>
+ </div>
+ </div>
+ </form>
+</div>
+<hr/>
+<div class="text-center">
+ <a data-toggle="collapse" href="#rev-advanced-search">Advanced search</a>
+</div>
+<div id="rev-advanced-search" data-toggle="collapse" class="collapse advanced-search">
+ <div class="row advanced-desc container-fluid">
+ You can also refer to a revision as an SWH time and place, time being a timestamp of when we
+ collected it (or as close to the timestamp as we can provide), place being an origin, and
+ optionally a branch name within the origin. See the origin section to search for origins in
+ SWH and find out their identifier.
+ </div>
+ <div>
+ <form method="get" action="{{ url_for('search_revision') }}">
+ <div class="forms-group row">
+ <div class="col-md-6 required">
+ <label>Revision Origin ID</label>
+ <div class="input-group">
+ <input class="form-control" type="text" placeholder="revision git SHA1" name="sha1_git" required="true"/>
+ <span class="input-group-btn">
+ <button class="btn btn-primary" type="submit">
+ <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
+ </button>
+ </span>
+ <a class="input-group-addon" data-toggle="collapse" href="#rev-tandp-collapse">Options</a>
+ </div>
+ </div>
+ <div class="col-md-6">
+ <div id="rev-tandp-collapse" class="collapse">
+ <label for="rev-branchname">Branch name</label>
+ <input id="rev-branchname"
+ class="optional form-control"
+ type="text" placeholder="refs/heads/master"
+ name="branch_name"/>
+ <label for="rev-timestamp">Timestamp</label>
+ <input id="rev-timestamp"
+ class="optional form-control"
+ type="text" placeholder="timestamp"
+ name="ts"/>
+ </div>
+ </div>
+ </div>
+ </form>
+ </div>
+</div>
diff --git a/swh/web/ui/templates/search-form.html b/swh/web/ui/templates/includes/search-form.html
rename from swh/web/ui/templates/search-form.html
rename to swh/web/ui/templates/includes/search-form.html
--- a/swh/web/ui/templates/search-form.html
+++ b/swh/web/ui/templates/includes/search-form.html
@@ -1,5 +1,5 @@
<!-- The text-based SHA1 or SHA256 search -->
-<h2>Search with SHA-1 or SHA-256:</h2>
+<label for="text-hash-form">Search with SHA-1 or SHA-256:</label>
<form id="text-hash-form"
action="{{ url_for('search_content') }}"
class="form"
@@ -21,7 +21,7 @@
</form>
<!-- The file-based drag&drop UI-->
-<h2>Search with files</h2>
+<label for="file-hash-form">Search with files</label>
<form id="file-hash-form"
action="{{ url_for('search_content') }}"
class="text-center form"
@@ -58,11 +58,9 @@
</form>
<!-- Required JS -->
-<script src="{{ url_for('static', filename='lib/core.js') }}"></script>
-<script src="{{ url_for('static', filename='lib/lib-typedarrays.js') }}"></script>
-<script src="{{ url_for('static', filename='lib/sha1.js') }}"></script>
-<script src="{{ url_for('static', filename='lib/sha256.js') }}"></script>
-<script src="{{ url_for('static', filename='js/search.js') }}"></script>
+{% for fname in ['lib/core.js', 'lib/lib-typedarrays.js', 'lib/sha256.js', 'js/search.js'] %}
+<script language="javascript" type="text/javascript" src="{{ url_for('static', filename=fname) }}"></script>
+{% endfor %}
<!-- Script setup -->
<script>
diff --git a/swh/web/ui/templates/search.html b/swh/web/ui/templates/search.html
--- a/swh/web/ui/templates/search.html
+++ b/swh/web/ui/templates/search.html
@@ -4,7 +4,7 @@
<div class="container">
<!-- Include the predefined search form-->
- {% include 'search-form.html' %}
+ {% include 'includes/search-form.html' %}
{% if search_res is not none %}
<!-- Search result display -->