From 5ea19abbfd01262348fa2447af9f9e7dcb668478 Mon Sep 17 00:00:00 2001
From: Patrick Jentsch <p.jentsch@uni-bielefeld.de>
Date: Mon, 2 Mar 2020 10:42:25 +0100
Subject: [PATCH] Text updates

---
 app/templates/nopaque.html.j2                 |   2 +-
 .../services/corpus_analysis.html.j2          |  76 ++---
 app/templates/services/nlp.html.j2            | 189 ++++++------
 app/templates/services/ocr.html.j2            | 289 +++++++++---------
 app/templates/services/setup_files.html.j2    | 117 ++++---
 5 files changed, 312 insertions(+), 361 deletions(-)

diff --git a/app/templates/nopaque.html.j2 b/app/templates/nopaque.html.j2
index a4ed0069..fa18a8d1 100644
--- a/app/templates/nopaque.html.j2
+++ b/app/templates/nopaque.html.j2
@@ -58,7 +58,7 @@
             {% if current_user.is_authenticated %}
             <a href="#" data-target="sidenav-main" class="sidenav-trigger"><i class="material-icons">menu</i></a>
             {% endif %}
-            <ul class="right hide-on-med-and-down">
+            <ul class="right">
               <li><a id="nav-notifications" class="dropdown-trigger no-autoinit" href="#!" data-target="nav-notifications-dropdown"><i class="material-icons">notifications</i></a></li>
               <li>
                 <a id="nav-account" class="dropdown-trigger no-autoinit" href="#!" data-target="nav-account-dropdown">
diff --git a/app/templates/services/corpus_analysis.html.j2 b/app/templates/services/corpus_analysis.html.j2
index 9675c9bd..d350dfd2 100644
--- a/app/templates/services/corpus_analysis.html.j2
+++ b/app/templates/services/corpus_analysis.html.j2
@@ -4,60 +4,32 @@
 
 {% block page_content %}
 <div class="col s12 m9 l10">
-  <div class="col s12">
-    <div class="card">
-      <div class="card-content">
-        <div class="row">
-          <div class="col s12 m6">
-            <span class="card-title"><i class="left material-icons">layers</i>Tokenization</span>
-            <p>Your text is split up into sentences and words, so called tokens, which can then be analyzed.</p>
-          </div>
-          <div class="col s12 m6">
-            <span class="card-title"><i class="left material-icons">layers</i>Lemmatization</span>
-            <p>All inflected forms of a word are grouped together so that it can be analyzed as a single item.</p>
-          </div>
-          <div class="col s12"><p>&nbsp;</p></div>
-          <div class="col s12 m6">
-            <span class="card-title"><i class="left material-icons">layers</i>Part-of-speech Tagging</span>
-            <p>In accordance with its definition and context, each word is marked up as corresponding to a particular part of speech.</p>
-          </div>
-          <div class="col s12 m6">
-            <span class="card-title"><i class="left material-icons">layers</i>Named-Entity Recognition</span>
-            <p>Named entities are located and classified into specific categories like persons or locations.</p>
-          </div>
-        </div>
+  <p>Nopaque lets you create and upload as many text corpora as you want. It makes use of CQP Query Language, which allows for complex search requests with the aid of metadata and NLP tags. The results can either be displayed as text or abstract visualizations.</p>
+  <div class="card">
+    <div class="card-content" id="corpora">
+      <div class="input-field">
+        <i class="material-icons prefix">search</i>
+        <input id="search-corpus" class="search" type="search"></input>
+        <label for="search-corpus">Search corpus</label>
       </div>
+      <table>
+        <thead>
+          <tr>
+            <th></th>
+            <th>
+              <span class="sort" data-sort="title">Title</span>
+              <span class="sort" data-sort="description">Description</span>
+            </th>
+            <th><span class="sort" data-sort="status">Status</span></th>
+            <th></th>
+          </tr>
+        </thead>
+        <tbody class="list"></tbody>
+      </table>
+      <ul class="pagination"></ul>
     </div>
-  </div>
-
-  <div class="col s12">
-    <h3>My corpora</h3>
-    <div class="card">
-      <div class="card-content" id="corpora">
-        <div class="input-field">
-          <i class="material-icons prefix">search</i>
-          <input id="search-corpus" class="search" type="search"></input>
-          <label for="search-corpus">Search corpus</label>
-        </div>
-        <table>
-          <thead>
-            <tr>
-              <th></th>
-              <th>
-                <span class="sort" data-sort="title">Title</span>
-                <span class="sort" data-sort="description">Description</span>
-              </th>
-              <th><span class="sort" data-sort="status">Status</span></th>
-              <th></th>
-            </tr>
-          </thead>
-          <tbody class="list"></tbody>
-        </table>
-        <ul class="pagination"></ul>
-      </div>
-      <div class="card-action right-align">
-        <a class="waves-effect waves-light btn" href="{{ url_for('corpora.add_corpus') }}">New corpus<i class="material-icons right">add</i></a>
-      </div>
+    <div class="card-action right-align">
+      <a class="waves-effect waves-light btn" href="{{ url_for('corpora.add_corpus') }}">New corpus<i class="material-icons right">add</i></a>
     </div>
   </div>
 </div>
diff --git a/app/templates/services/nlp.html.j2 b/app/templates/services/nlp.html.j2
index 41f27fa3..330323e4 100644
--- a/app/templates/services/nlp.html.j2
+++ b/app/templates/services/nlp.html.j2
@@ -4,24 +4,29 @@
 
 {% block page_content %}
 <div class="col s12 m9 l10">
-  <div class="col s12">
-    <div class="card">
-      <div class="card-content">
-        <div class="row">
-          <div class="col s12 m6">
+  <div class="card">
+    <div class="card-content">
+      <div class="row">
+        <div class="col s12 m6">
+          <div class="card-panel z-depth-0">
             <span class="card-title"><i class="left material-icons">layers</i>Tokenization</span>
             <p>Your text is split up into sentences and words, so called tokens, which can then be analyzed.</p>
           </div>
-          <div class="col s12 m6">
+        </div>
+        <div class="col s12 m6">
+          <div class="card-panel z-depth-0">
             <span class="card-title"><i class="left material-icons">layers</i>Lemmatization</span>
             <p>All inflected forms of a word are grouped together so that it can be analyzed as a single item.</p>
           </div>
-          <div class="col s12"><p>&nbsp;</p></div>
-          <div class="col s12 m6">
+        </div>
+        <div class="col s12 m6">
+          <div class="card-panel z-depth-0">
             <span class="card-title"><i class="left material-icons">layers</i>Part-of-speech Tagging</span>
             <p>In accordance with its definition and context, each word is marked up as corresponding to a particular part of speech.</p>
           </div>
-          <div class="col s12 m6">
+        </div>
+        <div class="col s12 m6">
+          <div class="card-panel z-depth-0">
             <span class="card-title"><i class="left material-icons">layers</i>Named-Entity Recognition</span>
             <p>Named entities are located and classified into specific categories like persons or locations.</p>
           </div>
@@ -30,97 +35,95 @@
     </div>
   </div>
 
-  <div class="col s12">
-    <h3>Submit a job</h3>
-    <div class="card">
-      <form class="nopaque-job-form" data-progress-modal="progress-modal">
-        <div class="card-content">
-          {{ add_job_form.hidden_tag() }}
-          <div class="row">
-            <div class="col s12 m4">
-              <div class="input-field">
-                <i class="material-icons prefix">title</i>
-                {{ add_job_form.title(data_length='32') }}
-                {{ add_job_form.title.label }}
-                {% for error in add_job_form.title.errors %}
-                  <span class="helper-text red-text">{{ error }}</span>
-                {% endfor %}
-              </div>
-            </div>
-            <div class="col s12 m4">
-              <div class="input-field">
-                <i class="material-icons prefix">language</i>
-                {{ add_job_form.language() }}
-                {{ add_job_form.language.label }}
-                {% for error in add_job_form.language.errors %}
-                  <span class="helper-text red-text">{{ error }}</span>
-                {% endfor %}
-              </div>
-            </div>
-            <div class="col s12 m4">
-              <div class="input-field">
-                <i class="material-icons prefix">language</i>
-                {{ add_job_form.version() }}
-                {{ add_job_form.version.label }}
-                {% for error in add_job_form.version.errors %}
-                  <span class="helper-text red-text">{{ error }}</span>
-                {% endfor %}
-              </div>
+  <h3>Submit a job</h3>
+  <div class="card">
+    <form class="nopaque-job-form" data-progress-modal="progress-modal">
+      <div class="card-content">
+        {{ add_job_form.hidden_tag() }}
+        <div class="row">
+          <div class="col s12 l4">
+            <div class="input-field">
+              <i class="material-icons prefix">title</i>
+              {{ add_job_form.title(data_length='32') }}
+              {{ add_job_form.title.label }}
+              {% for error in add_job_form.title.errors %}
+                <span class="helper-text red-text">{{ error }}</span>
+              {% endfor %}
             </div>
           </div>
-          <div class="row">
-            <div class="col s12 m6">
-              <div class="file-field input-field">
-                <div class="btn">
-                  <span>{{ add_job_form.files.label.text }}</span>
-                  {{ add_job_form.files(accept='text/plain') }}
-                </div>
-                <div class="file-path-wrapper">
-                  <input class="file-path validate" type="text">
-                </div>
-                {% for error in add_job_form.files.errors %}
-                  <span class="helper-text red-text">{{ error }}</span>
-                {% endfor %}
-              </div>
+          <div class="col s12 l4">
+            <div class="input-field">
+              <i class="material-icons prefix">language</i>
+              {{ add_job_form.language() }}
+              {{ add_job_form.language.label }}
+              {% for error in add_job_form.language.errors %}
+                <span class="helper-text red-text">{{ error }}</span>
+              {% endfor %}
             </div>
-            <div class="col s12 m6">
-              <div class="input-field">
-                <i class="material-icons prefix">description</i>
-                {{ add_job_form.description(data_length='255') }}
-                {{ add_job_form.description.label }}
-                {% for error in add_job_form.description.errors %}
-                  <span class="helper-text red-text">{{ error }}</span>
-                {% endfor %}
-              </div>
+          </div>
+          <div class="col s12 l4">
+            <div class="input-field">
+              <i class="material-icons prefix">language</i>
+              {{ add_job_form.version() }}
+              {{ add_job_form.version.label }}
+              {% for error in add_job_form.version.errors %}
+                <span class="helper-text red-text">{{ error }}</span>
+              {% endfor %}
             </div>
-            <div class="col s12">
-              <span class="card-title">Preprocessing options</span>
-            </div>
-            <div class="col s9">
-              <p>{{ add_job_form.check_encoding.label.text }}</p>
-              <p class="light">If the input files are not created with the nopaque OCR service or you do not know if your text files are UTF-8 encoded, check this switch. We will try to automatically determine the right encoding for your texts to process them.</p>
-            </div>
-            <div class="col s3 right-align">
-              <div class="switch">
-                <label>
-                  {{ add_job_form.check_encoding() }}
-                  <span class="lever"></span>
-                </label>
-              </div>
-            </div>
-            <!--
-            Seperate each setting with the following
-            <div class="col s12"><p>&nbsp;</p></div>
-            <div class="col s12 divider"></div>
-            <div class="col s12"><p>&nbsp;</p></div>
-            -->
           </div>
         </div>
-        <div class="card-action right-align">
-          {{ macros.submit_button(add_job_form.submit) }}
+        <div class="row">
+          <div class="col s12 l6">
+            <div class="file-field input-field">
+              <div class="btn">
+                <span>{{ add_job_form.files.label.text }}</span>
+                {{ add_job_form.files(accept='text/plain') }}
+              </div>
+              <div class="file-path-wrapper">
+                <input class="file-path validate" type="text">
+              </div>
+              {% for error in add_job_form.files.errors %}
+                <span class="helper-text red-text">{{ error }}</span>
+              {% endfor %}
+            </div>
+          </div>
+          <div class="col s12 l6">
+            <div class="input-field">
+              <i class="material-icons prefix">description</i>
+              {{ add_job_form.description(data_length='255') }}
+              {{ add_job_form.description.label }}
+              {% for error in add_job_form.description.errors %}
+                <span class="helper-text red-text">{{ error }}</span>
+              {% endfor %}
+            </div>
+          </div>
+          <div class="col s12">
+            <span class="card-title">Preprocessing</span>
+          </div>
+          <div class="col s9">
+            <p>{{ add_job_form.check_encoding.label.text }}</p>
+            <p class="light">If the input files are not created with the nopaque OCR service or you do not know if your text files are UTF-8 encoded, check this switch. We will try to automatically determine the right encoding for your texts to process them.</p>
+          </div>
+          <div class="col s3 right-align">
+            <div class="switch">
+              <label>
+                {{ add_job_form.check_encoding() }}
+                <span class="lever"></span>
+              </label>
+            </div>
+          </div>
+          <!--
+          Seperate each setting with the following
+          <div class="col s12"><p>&nbsp;</p></div>
+          <div class="col s12 divider"></div>
+          <div class="col s12"><p>&nbsp;</p></div>
+          -->
         </div>
-      </form>
-    </div>
+      </div>
+      <div class="card-action right-align">
+        {{ macros.submit_button(add_job_form.submit) }}
+      </div>
+    </form>
   </div>
 </div>
 
diff --git a/app/templates/services/ocr.html.j2 b/app/templates/services/ocr.html.j2
index e064beda..685f236a 100644
--- a/app/templates/services/ocr.html.j2
+++ b/app/templates/services/ocr.html.j2
@@ -4,168 +4,151 @@
 
 {% block page_content %}
 <div class="col s12 m9 l10">
-  <div class="col s12">
-    <div class="card">
-      <div class="card-content">
-        <div class="row">
-          <div class="col s12 m6">
-            <span class="card-title"><i class="left material-icons">layers</i>Eingabe von Bilddaten</span>
-            <p>Über ein Auftragsformular können Bilddaten in Form von PDF-Dateien hochgeladen werden.</p>
-          </div>
-          <div class="col s12 hide-on-med-and-up">&nbsp;</div>
-          <div class="col s12 m6">
-            <span class="card-title"><i class="left material-icons">layers</i>Optische Zeichenerkennung</span>
-            <p>Die optische Zeichenerkennung erfolgt in der Recheninfrastruktur der Plattform.</p>
-          </div>
-          <div class="col s12">&nbsp;</div>
-          <div class="col s12 m6">
-            <span class="card-title"><i class="left material-icons">layers</i>Fehlerkorrektur</span>
-            <p>Je nach Qualität der Eingabedaten kann es zu Fehlern kommen, die korrigiert werden sollten.</p>
-          </div>
-          <div class="col s12 hide-on-med-and-up">&nbsp;</div>
-          <div class="col s12 m6">
-            <span class="card-title"><i class="left material-icons">layers</i>Weiterverarbeitung</span>
-            <p>Die Textdaten können weiterverarbeitet<a class="tooltipped" data-position="top" data-tooltip="Zum Beispiel durch die hier angebotene linguistische Datenverarbeitung."><sup>[*]</sup></a> oder in dieser Form bereits genutzt<a class="tooltipped" data-position="top" data-tooltip="Zum Beispiel mit dem Programm &quot;AntConc&quot;."><sup>[*]</sup></a> werden.</p>
+  <div class="card">
+    <div class="card-content">
+      <div class="row">
+        <div class="col s12">
+          <div class="card-panel z-depth-0">
+            <span class="card-title"><i class="left material-icons">layers</i>OCR</span>
+            <p>In this process, nopaque converts your image data – like photos or scans – into text data. This step enables you to proceed with the computational analysis of your documents.</p>
           </div>
         </div>
       </div>
     </div>
   </div>
 
-  <div class="col s12">
-    <h3>Submit a job</h3>
-    <div class="card">
-      <form class="nopaque-job-form" data-progress-modal="progress-modal">
-        <div class="card-content">
-          {{ add_job_form.hidden_tag() }}
-          <div class="row">
-            <div class="col s12 m4">
-              <div class="input-field">
-                <i class="material-icons prefix">title</i>
-                {{ add_job_form.title(class="validate", data_length='32') }}
-                {{ add_job_form.title.label }}
-                {% for error in add_job_form.title.errors %}
-                  <span class="helper-text red-text">{{ error }}</span>
-                {% endfor %}
-              </div>
+  <h3>Submit a job</h3>
+  <div class="card">
+    <form class="nopaque-job-form" data-progress-modal="progress-modal">
+      <div class="card-content">
+        {{ add_job_form.hidden_tag() }}
+        <div class="row">
+          <div class="col s12 l4">
+            <div class="input-field">
+              <i class="material-icons prefix">title</i>
+              {{ add_job_form.title(class="validate", data_length='32') }}
+              {{ add_job_form.title.label }}
+              {% for error in add_job_form.title.errors %}
+                <span class="helper-text red-text">{{ error }}</span>
+              {% endfor %}
             </div>
-            <div class="col s12 m8">
-              <div class="input-field">
-                <i class="material-icons prefix">description</i>
-                {{ add_job_form.description(class="validate", data_length='255') }}
-                {{ add_job_form.description.label }}
-                {% for error in add_job_form.description.errors %}
-                  <span class="helper-text red-text">{{ error }}</span>
-                {% endfor %}
-              </div>
-            </div>
-            <div class="col s12 m5">
-              <div class="file-field input-field">
-                <div class="btn">
-                  <span>{{ add_job_form.files.label.text }}</span>
-                  {{ add_job_form.files(accept='application/pdf, image/tiff') }}
-                </div>
-                <div class="file-path-wrapper">
-                  <input class="file-path validate" type="text">
-                </div>
-                {% for error in add_job_form.files.errors %}
-                  <span class="helper-text red-text">{{ error }}</span>
-                {% endfor %}
-              </div>
-            </div>
-            <div class="col s12 m4">
-              <div class="input-field">
-                <i class="material-icons prefix">language</i>
-                {{ add_job_form.language(class="validate") }}
-                {{ add_job_form.language.label }}
-                {% for error in add_job_form.language.errors %}
-                  <span class="helper-text red-text">{{ error }}</span>
-                {% endfor %}
-              </div>
-            </div>
-            <div class="col s12 m3">
-              <div class="input-field">
-                <i class="material-icons prefix">apps</i>
-                {{ add_job_form.version(class="validate") }}
-                {{ add_job_form.version.label }}
-                {% for error in add_job_form.version.errors %}
-                  <span class="helper-text red-text">{{ error }}</span>
-                {% endfor %}
-              </div>
-            </div>
-            <div class="col s12">
-              <span class="card-title">Preprocessing options</span>
-            </div>
-            <div class="col s9">
-              <p>{{ add_job_form.binarization.label.text }}</p>
-              <p class="light">Based on a brightness threshold pixels are converted to either black or white. Reduces noise in images.</p>
-            </div>
-            <div class="col s3 right-align">
-              <div class="switch">
-                <label>
-                  {{ add_job_form.binarization() }}
-                  <span class="lever"></span>
-                </label>
-              </div>
-            </div>
-            <div class="col s12"><p>&nbsp;</p></div>
-            <div class="col s12 divider"></div>
-            <div class="col s12"><p>&nbsp;</p></div>
-            <div class="col s9">
-              <p>Page range</p>
-              <p class="light">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempora invidunt ut</p>
-            </div>
-            <div class="col s3 right-align">
-              <div class="switch">
-                <label>
-                  <input disabled type="checkbox">
-                  <span class="lever"></span>
-                </label>
-              </div>
-            </div>
-            <div class="col s12"><p>&nbsp;</p></div>
-            <div class="col s12 divider"></div>
-            <div class="col s12"><p>&nbsp;</p></div>
-            <div class="col s9">
-              <p>Page rotation</p>
-              <p class="light">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempora invidunt ut</p>
-            </div>
-            <div class="col s3 right-align">
-              <div class="switch">
-                <label>
-                  <input disabled type="checkbox">
-                  <span class="lever"></span>
-                </label>
-              </div>
-            </div>
-            <div class="col s12"><p>&nbsp;</p></div>
-            <div class="col s12 divider"></div>
-            <div class="col s12"><p>&nbsp;</p></div>
-            <div class="col s9">
-              <p>Page split</p>
-              <p class="light">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempora invidunt ut</p>
-            </div>
-            <div class="col s3 right-align">
-              <div class="switch">
-                <label>
-                  <input disabled type="checkbox">
-                  <span class="lever"></span>
-                </label>
-              </div>
-            </div>
-            <!--
-            Seperate each setting with the following
-            <div class="col s12"><p>&nbsp;</p></div>
-            <div class="col s12 divider"></div>
-            <div class="col s12"><p>&nbsp;</p></div>
-            -->
           </div>
+          <div class="col s12 l8">
+            <div class="input-field">
+              <i class="material-icons prefix">description</i>
+              {{ add_job_form.description(class="validate", data_length='255') }}
+              {{ add_job_form.description.label }}
+              {% for error in add_job_form.description.errors %}
+                <span class="helper-text red-text">{{ error }}</span>
+              {% endfor %}
+            </div>
+          </div>
+          <div class="col s12 l5">
+            <div class="file-field input-field">
+              <div class="btn">
+                <span>{{ add_job_form.files.label.text }}</span>
+                {{ add_job_form.files(accept='application/pdf, image/tiff') }}
+              </div>
+              <div class="file-path-wrapper">
+                <input class="file-path validate" type="text">
+              </div>
+              {% for error in add_job_form.files.errors %}
+                <span class="helper-text red-text">{{ error }}</span>
+              {% endfor %}
+            </div>
+          </div>
+          <div class="col s12 l4">
+            <div class="input-field">
+              <i class="material-icons prefix">language</i>
+              {{ add_job_form.language(class="validate") }}
+              {{ add_job_form.language.label }}
+              {% for error in add_job_form.language.errors %}
+                <span class="helper-text red-text">{{ error }}</span>
+              {% endfor %}
+            </div>
+          </div>
+          <div class="col s12 l3">
+            <div class="input-field">
+              <i class="material-icons prefix">apps</i>
+              {{ add_job_form.version(class="validate") }}
+              {{ add_job_form.version.label }}
+              {% for error in add_job_form.version.errors %}
+                <span class="helper-text red-text">{{ error }}</span>
+              {% endfor %}
+            </div>
+          </div>
+          <div class="col s12">
+            <span class="card-title">Preprocessing</span>
+          </div>
+          <div class="col s9">
+            <p>{{ add_job_form.binarization.label.text }}</p>
+            <p class="light">Based on a brightness threshold pixels are converted into either black or white. It is useful to reduce noise in images. (<b>longer duration</b>)</p>
+          </div>
+          <div class="col s3 right-align">
+            <div class="switch">
+              <label>
+                {{ add_job_form.binarization() }}
+                <span class="lever"></span>
+              </label>
+            </div>
+          </div>
+          <div class="col s12"><p>&nbsp;</p></div>
+          <div class="col s12 divider"></div>
+          <div class="col s12"><p>&nbsp;</p></div>
+          <div class="col s9">
+            <p>Page range</p>
+            <p class="light"></p>
+          </div>
+          <div class="col s3 right-align">
+            <div class="switch">
+              <label>
+                <input disabled type="checkbox">
+                <span class="lever"></span>
+              </label>
+            </div>
+          </div>
+          <div class="col s12"><p>&nbsp;</p></div>
+          <div class="col s12 divider"></div>
+          <div class="col s12"><p>&nbsp;</p></div>
+          <div class="col s9">
+            <p>Page rotation</p>
+            <p class="light"></p>
+          </div>
+          <div class="col s3 right-align">
+            <div class="switch">
+              <label>
+                <input disabled type="checkbox">
+                <span class="lever"></span>
+              </label>
+            </div>
+          </div>
+          <div class="col s12"><p>&nbsp;</p></div>
+          <div class="col s12 divider"></div>
+          <div class="col s12"><p>&nbsp;</p></div>
+          <div class="col s9">
+            <p>Page split</p>
+            <p class="light"></p>
+          </div>
+          <div class="col s3 right-align">
+            <div class="switch">
+              <label>
+                <input disabled type="checkbox">
+                <span class="lever"></span>
+              </label>
+            </div>
+          </div>
+          <!--
+          Seperate each setting with the following
+          <div class="col s12"><p>&nbsp;</p></div>
+          <div class="col s12 divider"></div>
+          <div class="col s12"><p>&nbsp;</p></div>
+          -->
         </div>
-        <div class="card-action right-align">
-          {{ macros.submit_button(add_job_form.submit) }}
-        </div>
-      </form>
-    </div>
+      </div>
+      <div class="card-action right-align">
+        {{ macros.submit_button(add_job_form.submit) }}
+      </div>
+    </form>
   </div>
 </div>
 
diff --git a/app/templates/services/setup_files.html.j2 b/app/templates/services/setup_files.html.j2
index f8c0afcb..cef684ed 100644
--- a/app/templates/services/setup_files.html.j2
+++ b/app/templates/services/setup_files.html.j2
@@ -4,82 +4,75 @@
 
 {% block page_content %}
 <div class="col s12 m9 l10">
-  <div class="col s12">
-    <div class="card">
-      <div class="card-content">
-        <div class="row">
-          <div class="col s12 m6">
-            <span class="card-title"><i class="left material-icons">layers</i>Image upload</span>
-            <p>Upload your image files in PNG, JPEG oder singlepage TIFF file format with the provided formular.</p>
-          </div>
-          <div class="col s12 hide-on-med-and-up">&nbsp;</div>
-          <div class="col s12 m6">
+  <div class="card">
+    <div class="card-content">
+      <div class="row">
+        <div class="col s12">
+          <div class="card-panel z-depth-0">
             <span class="card-title"><i class="left material-icons">layers</i>Merge process</span>
-            <p>The cloud infrastructure picks up your data and merges it into a multipage TIFF file.</p>
+            <p>nopaque converts and merges your files in its cloud infrastructure to facilitate further processing and the application of other services. You only have to number your files in the correct order to receive a multi-page TIFF file.</p>
           </div>
         </div>
       </div>
     </div>
   </div>
 
-  <div class="col s12">
-    <h3>Submit a job</h3>
-    <div class="card">
-      <form class="nopaque-job-form" data-progress-modal="progress-modal">
-        <div class="card-content">
-          {{ add_job_form.hidden_tag() }}
-          <div class="row">
-            <div class="col s12 m4">
-              <div class="input-field">
-                <i class="material-icons prefix">title</i>
-                {{ add_job_form.title(data_length='32') }}
-                {{ add_job_form.title.label }}
-                {% for error in add_job_form.title.errors %}
-                  <span class="helper-text red-text">{{ error }}</span>
-                {% endfor %}
-              </div>
+  <h3>Submit a job</h3>
+  <div class="card">
+    <form class="nopaque-job-form" data-progress-modal="progress-modal">
+      <div class="card-content">
+        {{ add_job_form.hidden_tag() }}
+        <div class="row">
+          <div class="col s12 l4">
+            <div class="input-field">
+              <i class="material-icons prefix">title</i>
+              {{ add_job_form.title(data_length='32') }}
+              {{ add_job_form.title.label }}
+              {% for error in add_job_form.title.errors %}
+                <span class="helper-text red-text">{{ error }}</span>
+              {% endfor %}
             </div>
-            <div class="col s12 m8">
-              <div class="input-field">
-                <i class="material-icons prefix">description</i>
-                {{ add_job_form.description(data_length='255') }}
-                {{ add_job_form.description.label }}
-                {% for error in add_job_form.description.errors %}
-                  <span class="helper-text red-text">{{ error }}</span>
-                {% endfor %}
-              </div>
+          </div>
+          <div class="col s12 l8">
+            <div class="input-field">
+              <i class="material-icons prefix">description</i>
+              {{ add_job_form.description(data_length='255') }}
+              {{ add_job_form.description.label }}
+              {% for error in add_job_form.description.errors %}
+                <span class="helper-text red-text">{{ error }}</span>
+              {% endfor %}
             </div>
-            <div class="col s12">
-              <div class="file-field input-field">
-                <div class="btn">
-                  <span>{{ add_job_form.files.label.text }}</span>
-                  {{ add_job_form.files(accept='image/jpeg, image/png, image/tiff') }}
-                </div>
-                <div class="file-path-wrapper">
-                  <input class="file-path validate" type="text">
-                </div>
-                {% for error in add_job_form.files.errors %}
-                  <span class="helper-text red-text">{{ error }}</span>
-                {% endfor %}
+          </div>
+          <div class="col s12">
+            <div class="file-field input-field">
+              <div class="btn">
+                <span>{{ add_job_form.files.label.text }}</span>
+                {{ add_job_form.files(accept='image/jpeg, image/png, image/tiff') }}
               </div>
+              <div class="file-path-wrapper">
+                <input class="file-path validate" type="text">
+              </div>
+              {% for error in add_job_form.files.errors %}
+                <span class="helper-text red-text">{{ error }}</span>
+              {% endfor %}
             </div>
-            <div class="col s12 hide">
-              <div class="input-field">
-                <i class="material-icons prefix">apps</i>
-                {{ add_job_form.version() }}
-                {{ add_job_form.version.label }}
-                {% for error in add_job_form.version.errors %}
-                  <span class="helper-text red-text">{{ error }}</span>
-                {% endfor %}
-              </div>
+          </div>
+          <div class="col s12 hide">
+            <div class="input-field">
+              <i class="material-icons prefix">apps</i>
+              {{ add_job_form.version() }}
+              {{ add_job_form.version.label }}
+              {% for error in add_job_form.version.errors %}
+                <span class="helper-text red-text">{{ error }}</span>
+              {% endfor %}
             </div>
           </div>
         </div>
-        <div class="card-action right-align">
-          {{ macros.submit_button(add_job_form.submit) }}
-        </div>
-      </form>
-    </div>
+      </div>
+      <div class="card-action right-align">
+        {{ macros.submit_button(add_job_form.submit) }}
+      </div>
+    </form>
   </div>
 </div>