Add prototype

2026-10-11 19:04:24 +00:00 · 2019-06-03 14:57:09 +02:00
1 parent b8fa8f47ab
commit 86557443a2
@@ -0,0 +1,222 @@
+<!DOCTYPE html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8">
+    <title>Opaque | Benutzerverwaltung</title>
+    <link href="/vre/images/sfb_1288.png" rel="icon" type="image/png">
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <link rel="stylesheet" href="css/materialize.min.css">
+    <link rel="stylesheet" href="css/style.css">
+    <script src="js/vre_manager_rest.js"></script>
+    <script src="js/vre.js"></script>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  </head>
+  <body class="blue-grey lighten-5">
+    <header>
+      <ul id="main-nav-account-dropdown" class="dropdown-content">
+        <li class="active">
+          <a href="account.html">Benutzerverwaltung</a>
+        </li>
+        <li class="divider"></li>
+        <li>
+          <a href="javascript:logout();">Abmelden</a>
+        </li>
+      </ul>
+      <nav class="blue-grey darken-2">
+        <div class="container">
+          <div class="nav-wrapper">
+            <a href="portal.html" class="brand-logo">
+              <i class="material-icons hide-on-small-only">cloud</i>
+              Opaque
+            </a>
+            <a href="#" data-target="main-nav-mobile" class="sidenav-trigger">
+              <i class="material-icons">menu</i>
+            </a>
+            <ul id="main-nav" class="right hide-on-med-and-down">
+              <li>
+                <a href="job_manager.html">
+                  <i class="material-icons left">work</i>
+                  Auftragsübersicht
+                </a>
+              </li>
+              <li>
+                <a href="nlp.html">
+                  <i class="material-icons left">format_textdirection_l_to_r</i>
+                  Linguistische Datenverarbeitung
+                </a>
+              </li>
+              <li>
+                <a href="ocr.html">
+                  <i class="material-icons left">find_in_page</i>
+                  Texterkennung
+                </a>
+              </li>
+              <li class="active">
+                <a id="main-nav-account" class="dropdown-trigger" href="#!" data-target="main-nav-account-dropdown">
+                  <i class="material-icons left">account_circle</i>
+                  Benutzer
+                  <i class="material-icons right">arrow_drop_down</i>
+                </a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </nav>
+      <ul class="sidenav" id="main-nav-mobile">
+      <li>
+        <a href="job_manager.html">
+          <i class="material-icons left">work</i>
+          Auftragsübersicht
+        </a>
+      </li>
+      <li>
+        <a href="nlp.html">
+          <i class="material-icons left">format_textdirection_l_to_r</i>
+          Linguistische Datenverarbeitung
+        </a>
+      </li>
+      <li>
+        <a href="ocr.html">
+          <i class="material-icons left">find_in_page</i>
+          Texterkennung
+        </a>
+      </li>
+      <li class="active">
+        <a href="account.html">
+          <i class="material-icons">account_circle</i>
+          Benutzer
+        </a>
+      </li>
+      <li>
+        <a href="javascript:logout();">
+          <i class="material-icons">account_circle</i>
+          Abmelden
+        </a>
+      </li>
+    </ul>
+    </header>
+
+    <main>
+      <div class="container">
+        <div class="row">
+          <div class="col s12 m8">
+            <div class="card">
+              <div class="card-content">
+                <span class="card-title">Benutzerverwaltung</span>
+                <p>&nbsp;</p>
+                <form id="user_form" class="row">
+                  <div class="input-field col s12 m6">
+                    <i class="material-icons prefix">account_circle</i>
+                    <input id="user-form-first-name" type="text">
+                    <label for="first-form-first-name">Vorname</label>
+                  </div>
+                  <div class="input-field col s12 m6">
+                    <input id="user-form-last-name" type="text">
+                    <label for="first-form-last-name">Nachname</label>
+                  </div>
+                  <div class="input-field col s12 m6">
+                    <i class="material-icons prefix">email</i>
+                    <input id="user-form-e-mail" type="text">
+                    <label for="first-form-e-mail">E-Mail</label>
+                  </div>
+                  <div class="input-field col s12 m6">
+                    <p style="height: 64px;">
+                      <label>
+                        <input id="user-form-notifications" type="checkbox" checked="checked">
+                        <span>Benachrichtigungen per E-Mail erhalten</span>
+                      </label>
+                    </p>
+                  </div>
+                  <div class="input-field col s12 m6">
+                    <i class="material-icons prefix">phone</i>
+                    <input id="user-form-phone" type="text">
+                    <label for="first-form-phone">Phone</label>
+                  </div>
+                  <div class="input-field col s12 right-align">
+                    <a id="user-form-reset" class="waves-effect waves-light btn disabled">Verwerfen</a>
+                    <a id="user-form-submit" class="waves-effect waves-light btn disabled">Bestätigen</a>
+                  </div>
+                </form>
+              </div>
+            </div>
+          </div>
+          <div class="col s12 m4">
+            <div class="card">
+              <div class="card-content">
+                <span class="card-title">Texterkennung</span>
+                <p>
+                  <i class="material-icons medium blue-grey-text text-darken-2 left">find_in_page</i>
+                  Textdaten werden aus Scans oder Fotos zur anschließenden
+                  Weiterverarbeitung extrahiert.
+                </p>
+              </div>
+              <div class="card-action right-align">
+                <a href="ocr.html" class="waves-effect waves-light btn">Zum Dienst</a>
+              </div>
+            </div>
+
+            <div class="card">
+              <div class="card-content">
+                <span class="card-title">Linguistische Datenverarbeitung</span>
+                <p>
+                  <i class="material-icons medium blue-grey-text text-darken-2 left">format_textdirection_l_to_r</i>
+                  Mit Hilfe datenverarbeitender Methoden werden Textdaten mit
+                  weiteren Informationen angereichert.
+                </p>
+              </div>
+              <div class="card-action right-align">
+                <a href="nlp.html" class="waves-effect waves-light btn">Zum Dienst</a>
+              </div>
+            </div>
+
+            <div class="card">
+              <div class="card-content">
+                <span class="card-title">Auftragsübersicht</span>
+                <p>
+                  <i class="material-icons medium blue-grey-text text-darken-2 left">work</i>
+                  Hier wird der aktuelle Status sämtlicher vom Benutzer erstellten
+                  Aufträge aufgelistet.
+                </p>
+              </div>
+              <div class="card-action right-align">
+                <a href="job_manager.html" class="waves-effect waves-light btn">Öffnen</a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+
+    <footer class="page-footer blue-grey darken-2">
+      <div class="container">
+        <div class="row">
+          <div class="col s12">
+            <p class="grey-text text-lighten-4 left">
+              <a href="https://www.uni-bielefeld.de/">
+                <img src="images/universitaet_bielefeld.png" alt="Logo: Universität Bielefeld" style="height: 72.5px">
+              </a>
+            </p>
+            <p class="grey-text text-lighten-4 right">
+              Gefördert durch die<br>
+              <a href="https://www.dfg.de/">
+                <img src="images/dfg.png" alt="Logo: Deutsche Forschungsgemeinschaft" style="height: 50px;">
+              </a>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer-copyright">
+        <div class="container">
+          © 2019 Copyright
+          <a class="grey-text text-lighten-4" href="https://www.uni-bielefeld.de/sfb1288">Universität Bielefeld | SFB 1288</a>
+          <a class="grey-text text-lighten-4 right" href="impressum.html">Impressum</a>
+        </div>
+      </div>
+    </footer>
+    <script src="js/materialize.min.js"></script>
+    <script>
+      M.AutoInit();
+    </script>
+    <script src="js/account.js"></script>
+  </body>
+</html>
@@ -0,0 +1,13 @@
+/*!
+ * Materialize v1.0.0 (http://materializecss.com)
+ * Copyright 2014-2017 Materialize
+ * MIT License (https://raw.githubusercontent.com/Dogfalo/materialize/master/LICENSE)
+ */
+.materialize-red{background-color:#e51c23 !important}.materialize-red-text{color:#e51c23 !important}.materialize-red.lighten-5{background-color:#fdeaeb !important}.materialize-red-text.text-lighten-5{color:#fdeaeb !important}.materialize-red.lighten-4{background-color:#f8c1c3 !important}.materialize-red-text.text-lighten-4{color:#f8c1c3 !important}.materialize-red.lighten-3{background-color:#f3989b !important}.materialize-red-text.text-lighten-3{color:#f3989b !important}.materialize-red.lighten-2{background-color:#ee6e73 !important}.materialize-red-text.text-lighten-2{color:#ee6e73 !important}.materialize-red.lighten-1{background-color:#ea454b !important}.materialize-red-text.text-lighten-1{color:#ea454b !important}.materialize-red.darken-1{background-color:#d0181e !important}.materialize-red-text.text-darken-1{color:#d0181e !important}.materialize-red.darken-2{background-color:#b9151b !important}.materialize-red-text.text-darken-2{color:#b9151b !important}.materialize-red.darken-3{background-color:#a21318 !important}.materialize-red-text.text-darken-3{color:#a21318 !important}.materialize-red.darken-4{background-color:#8b1014 !important}.materialize-red-text.text-darken-4{color:#8b1014 !important}.red{background-color:#F44336 !important}.red-text{color:#F44336 !important}.red.lighten-5{background-color:#FFEBEE !important}.red-text.text-lighten-5{color:#FFEBEE !important}.red.lighten-4{background-color:#FFCDD2 !important}.red-text.text-lighten-4{color:#FFCDD2 !important}.red.lighten-3{background-color:#EF9A9A !important}.red-text.text-lighten-3{color:#EF9A9A !important}.red.lighten-2{background-color:#E57373 !important}.red-text.text-lighten-2{color:#E57373 !important}.red.lighten-1{background-color:#EF5350 !important}.red-text.text-lighten-1{color:#EF5350 !important}.red.darken-1{background-color:#E53935 !important}.red-text.text-darken-1{color:#E53935 !important}.red.darken-2{background-color:#D32F2F !important}.red-text.text-darken-2{color:#D32F2F !important}.red.darken-3{background-color:#C62828 !important}.red-text.text-darken-3{color:#C62828 !important}.red.darken-4{background-color:#B71C1C !important}.red-text.text-darken-4{color:#B71C1C !important}.red.accent-1{background-color:#FF8A80 !important}.red-text.text-accent-1{color:#FF8A80 !important}.red.accent-2{background-color:#FF5252 !important}.red-text.text-accent-2{color:#FF5252 !important}.red.accent-3{background-color:#FF1744 !important}.red-text.text-accent-3{color:#FF1744 !important}.red.accent-4{background-color:#D50000 !important}.red-text.text-accent-4{color:#D50000 !important}.pink{background-color:#e91e63 !important}.pink-text{color:#e91e63 !important}.pink.lighten-5{background-color:#fce4ec !important}.pink-text.text-lighten-5{color:#fce4ec !important}.pink.lighten-4{background-color:#f8bbd0 !important}.pink-text.text-lighten-4{color:#f8bbd0 !important}.pink.lighten-3{background-color:#f48fb1 !important}.pink-text.text-lighten-3{color:#f48fb1 !important}.pink.lighten-2{background-color:#f06292 !important}.pink-text.text-lighten-2{color:#f06292 !important}.pink.lighten-1{background-color:#ec407a !important}.pink-text.text-lighten-1{color:#ec407a !important}.pink.darken-1{background-color:#d81b60 !important}.pink-text.text-darken-1{color:#d81b60 !important}.pink.darken-2{background-color:#c2185b !important}.pink-text.text-darken-2{color:#c2185b !important}.pink.darken-3{background-color:#ad1457 !important}.pink-text.text-darken-3{color:#ad1457 !important}.pink.darken-4{background-color:#880e4f !important}.pink-text.text-darken-4{color:#880e4f !important}.pink.accent-1{background-color:#ff80ab !important}.pink-text.text-accent-1{color:#ff80ab !important}.pink.accent-2{background-color:#ff4081 !important}.pink-text.text-accent-2{color:#ff4081 !important}.pink.accent-3{background-color:#f50057 !important}.pink-text.text-accent-3{color:#f50057 !important}.pink.accent-4{background-color:#c51162 !important}.pink-text.text-accent-4{color:#c51162 !important}.purple{background-color:#9c27b0 !important}.purple-text{color:#9c27b0 !important}.purple.lighten-5{background-color:#f3e5f5 !important}.purple-text.text-lighten-5{color:#f3e5f5 !important}.purple.lighten-4{background-color:#e1bee7 !important}.purple-text.text-lighten-4{color:#e1bee7 !important}.purple.lighten-3{background-color:#ce93d8 !important}.purple-text.text-lighten-3{color:#ce93d8 !important}.purple.lighten-2{background-color:#ba68c8 !important}.purple-text.text-lighten-2{color:#ba68c8 !important}.purple.lighten-1{background-color:#ab47bc !important}.purple-text.text-lighten-1{color:#ab47bc !important}.purple.darken-1{background-color:#8e24aa !important}.purple-text.text-darken-1{color:#8e24aa !important}.purple.darken-2{background-color:#7b1fa2 !important}.purple-text.text-darken-2{color:#7b1fa2 !important}.purple.darken-3{background-color:#6a1b9a !important}.purple-text.text-darken-3{color:#6a1b9a !important}.purple.darken-4{background-color:#4a148c !important}.purple-text.text-darkeLine truncated
+ * Waves v0.6.0
+ * http://fian.my.id/Waves
+ *
+ * Copyright 2014 Alfiana E. Sibuea and other contributors
+ * Released under the MIT license
+ * https://github.com/fians/Waves/blob/master/LICENSE
+ */.waves-effect{position:relative;cursor:pointer;display:inline-block;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;vertical-align:middle;z-index:1;-webkit-transition:.3s ease-out;transition:.3s ease-out}.waves-effect .waves-ripple{position:absolute;border-radius:50%;width:20px;height:20px;margin-top:-10px;margin-left:-10px;opacity:0;background:rgba(0,0,0,0.2);-webkit-transition:all 0.7s ease-out;transition:all 0.7s ease-out;-webkit-transition-property:opacity, -webkit-transform;transition-property:opacity, -webkit-transform;transition-property:transform, opacity;transition-property:transform, opacity, -webkit-transform;-webkit-transform:scale(0);transform:scale(0);pointer-events:none}.waves-effect.waves-light .waves-ripple{background-color:rgba(255,255,255,0.45)}.waves-effect.waves-red .waves-ripple{background-color:rgba(244,67,54,0.7)}.waves-effect.waves-yellow .waves-ripple{background-color:rgba(255,235,59,0.7)}.waves-effect.waves-orange .waves-ripple{background-color:rgba(255,152,0,0.7)}.waves-effect.waves-purple .waves-ripple{background-color:rgba(156,39,176,0.7)}.waves-effect.waves-green .waves-ripple{background-color:rgba(76,175,80,0.7)}.waves-effect.waves-teal .waves-ripple{background-color:rgba(0,150,136,0.7)}.waves-effect input[type="button"],.waves-effect input[type="reset"],.waves-effect input[type="submit"]{border:0;font-style:normal;font-size:inherit;text-transform:inherit;background:none}.waves-effect img{position:relative;z-index:-1}.waves-notransition{-webkit-transition:none !important;transition:none !important}.waves-circle{-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-mask-image:-webkit-radial-gradient(circle, white 100%, black 100%)}.waves-input-wrapper{border-radius:0.2em;vertical-align:bottom}.waves-input-wrapper .waves-button-input{position:relative;top:0;left:0;z-index:1}.waves-circle{text-align:center;width:2.5em;height:2.5em;line-height:2.5em;border-radius:50%;-webkit-mask-image:none}.waves-block{display:block}.waves-effect .waves-ripple{z-index:-1}.modal{display:none;position:fixed;left:0;right:0;background-color:#fafafa;padding:0;max-height:70%;width:55%;margin:auto;overflow-y:auto;border-radius:2px;will-change:top, opacity}.modal:focus{outline:none}@media only screen and (max-width: 992px){.modal{width:80%}}.modal h1,.modal h2,.modal h3,.modal h4{margin-top:0}.modal .modal-content{padding:24px}.modal .modal-close{cursor:pointer}.modal .modal-footer{border-radius:0 0 2px 2px;background-color:#fafafa;padding:4px 6px;height:56px;width:100%;text-align:right}.modal .modal-footer .btn,.modal .modal-footer .btn-large,.modal .modal-footer .btn-small,.modal .modal-footer .btn-flat{margin:6px 0}.modal-overlay{position:fixed;z-index:999;top:-25%;left:0;bottom:0;right:0;height:125%;width:100%;background:#000;display:none;will-change:opacity}.modal.modal-fixed-footer{padding:0;height:70%}.modal.modal-fixed-footer .modal-content{position:absolute;height:calc(100% - 56px);max-height:100%;width:100%;overflow-y:auto}.modal.modal-fixed-footer .modal-footer{border-top:1px solid rgba(0,0,0,0.1);position:absolute;bottom:0}.modal.bottom-sheet{top:auto;bottom:-100%;margin:0;width:100%;max-height:45%;border-radius:0;will-change:bottom, opacity}.collapsible{border-top:1px solid #ddd;border-right:1px solid #ddd;border-left:1px solid #ddd;margin:.5rem 0 1rem 0}.collapsible-header{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;cursor:pointer;-webkit-tap-highlight-color:transparent;line-height:1.5;padding:1rem;background-color:#fff;border-bottom:1px solid #ddd}.collapsible-header:focus{outline:0}.collapsible-header i{width:2rem;font-size:1.6rem;display:inline-block;text-align:center;margin-right:1rem}.keyboard-focused .collapsible-header:focus{background-color:#eee}.collapsible-body{display:none;border-bottom:1px solid #ddd;-webkit-box-sizing:border-box;box-sizing:border-box;padding:2rem}.sidenav .collapsible,.sidenav.fixed .collapsible{border:none;-webkit-box-shadow:none;box-shadow:none}.sidenav .collapsible li,.sidenav.fixed .collapsible li{padding:0}.sidenav .collapsible-header,.sidenav.fixed .collapsible-header{background-color:transparent;border:none;line-height:inherit;height:inherit;padding:0 16px}.sidenav .collapsible-header:hover,.sidenav.fixed .collapsible-header:hover{background-color:rgba(0,0,0,0.05)}.sidenav .collapsible-header i,.sidenav.fixed .collapsible-header i{line-height:inherit}.sidenav .collapsible-body,.sidenav.fixed .collapsible-body{border:0;background-color:#fff}.sidenav .collapsible-body li a,.sidenav.fixed .collapsible-body li a{padding:0 23.5px 0 31px}.collapsible.popout{border:none;-webkit-box-shadow:none;box-shadow:none}.collapsible.popout>li{-webkit-box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);margin:0 24px;-webkit-transition:margin 0.35s cubLine truncated
@@ -0,0 +1,43 @@
+body {
+    display: flex;
+    min-height: 100vh;
+    flex-direction: column;
+}
+
+main {
+    flex: 1 0 auto;
+}
+
+.tabs .tab {
+  cursor: pointer;
+}
+
+.tabs .tab a {
+    color: rgba(0,0,0,0.87);
+}
+
+.tabs .tab a:hover {
+    background-color: #eceff1;
+    color: rgba(0,0,0,0.87);
+}
+
+.tabs .tab a.active, .tabs .tab a:focus.active {
+    background-color: #fff;
+    color: rgba(0,0,0,0.87);
+}
+
+.tabs .indicator {
+    background-color: #455a64;
+}
+
+.no-padding {
+    padding: 0;
+}
+
+.overflow-hidden {
+  overflow: hidden;
+}
+
+.overflow-visible {
+  overflow: visible;
+}
@@ -0,0 +1 @@
+<mxfile modified="2019-02-21T10:15:24.039Z" host="www.draw.io" agent="Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:65.0) Gecko/20100101 Firefox/65.0" etag="5nBsW4ZSyWNaf1kxtOQV" version="10.2.5" type="device"><diagram id="ulq2d8L5X5YhzO1EcT_f" name="Page-1">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 truncated
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8">
+    <title>Opaque | Anmeldung</title>
+    <link href="/vre/images/sfb_1288.png" rel="icon" type="image/png">
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <link rel="stylesheet" href="css/materialize.min.css">
+    <link rel="stylesheet" href="css/style.css">
+    <script src="js/vre_manager_rest.js"></script>
+    <script src="js/vre.js"></script>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  </head>
+  <body class="blue-grey lighten-5">
+    <main class="valign-wrapper">
+      <div class="container">
+        <div class="row">
+            <div class="col card s12 m6 offset-m3">
+              <div class="card-content">
+                <span class="card-title"><i class="material-icons left">cloud</i> Opaque</span>
+              </div>
+            </div>
+            <div class="col card s12 m6 offset-m3">
+              <div class="card-content">
+                <span class="card-title">Anmeldung</span>
+                <form id="login_form" class="row" action="javascript:LoginFormSubmitHandler();">
+                  <div class="input-field col s12">
+                    <input id="login-form-user" type="text" class="validate" autofocus="autofocus" onfocus="this.select()">
+                    <label for="login-form-user">Benutzername</label>
+                  </div>
+                  <div class="input-field col s12">
+                    <input id="login-form-password" type="password" class="validate">
+                    <label for="login-form-password">Passwort</label>
+                    <span class="helper-text" data-error="Benutzername oder Passwort falsch"></span>
+                  </div>
+                  <div class="input-field col s12 hide">
+                    <input id="login_form_submit" type="submit">
+                  </div>
+                </form>
+              </div>
+              <div class="card-action right-align">
+                <a href="javascript:LoginFormSubmitHandler();" class="waves-effect waves-light btn">Anmelden</a>
+              </div>
+            </div>
+        </div>
+      </div>
+    </main>
+    <script src="js/materialize.min.js"></script>
+    <script>
+      M.AutoInit();
+    </script>
+    <script src="js/index.js"></script>
+  </body>
+</html>
@@ -0,0 +1,197 @@
+<!DOCTYPE html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8">
+    <title>Opaque | Auftragsverwaltung</title>
+    <link href="/vre/images/sfb_1288.png" rel="icon" type="image/png">
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <link rel="stylesheet" href="css/materialize.min.css">
+    <link rel="stylesheet" href="css/style.css">
+    <script src="js/vre_manager_rest.js"></script>
+    <script src="js/vre.js"></script>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  </head>
+  <body class="blue-grey lighten-5">
+    <header>
+      <ul id="main-nav-account-dropdown" class="dropdown-content">
+        <li>
+          <a href="account.html">Benutzerverwaltung</a>
+        </li>
+        <li class="divider"></li>
+        <li>
+          <a href="javascript:logout();">Abmelden</a>
+        </li>
+      </ul>
+      <nav class="blue-grey darken-2">
+        <div class="container">
+          <div class="nav-wrapper">
+            <a href="portal.html" class="brand-logo">
+              <i class="material-icons hide-on-small-only">cloud</i>
+              Opaque
+            </a>
+            <a href="#" data-target="main-nav-mobile" class="sidenav-trigger">
+              <i class="material-icons">menu</i>
+            </a>
+            <ul id="main-nav" class="right hide-on-med-and-down">
+              <li class="active">
+                <a href="job_manager.html">
+                  <i class="material-icons left">work</i>
+                  Auftragsübersicht
+                </a>
+              </li>
+              <li>
+                <a href="nlp.html">
+                  <i class="material-icons left">format_textdirection_l_to_r</i>
+                  Linguistische Datenverarbeitung
+                </a>
+              </li>
+              <li>
+                <a href="ocr.html">
+                  <i class="material-icons left">find_in_page</i>
+                  Texterkennung
+                </a>
+              </li>
+              <li>
+                <a id="main-nav-account" class="dropdown-trigger" href="#!" data-target="main-nav-account-dropdown">
+                  <i class="material-icons left">account_circle</i>
+                  Benutzer
+                  <i class="material-icons right">arrow_drop_down</i>
+                </a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </nav>
+      <ul class="sidenav" id="main-nav-mobile">
+      <li class="active">
+        <a href="job_manager.html">
+          <i class="material-icons left">work</i>
+          Auftragsübersicht
+        </a>
+      </li>
+      <li>
+        <a href="nlp.html">
+          <i class="material-icons left">format_textdirection_l_to_r</i>
+          Linguistische Datenverarbeitung
+        </a>
+      </li>
+      <li>
+        <a href="ocr.html">
+          <i class="material-icons left">find_in_page</i>
+          Texterkennung
+        </a>
+      </li>
+      <li>
+        <a href="account.html">
+          <i class="material-icons">account_circle</i>
+          Benutzer
+        </a>
+      </li>
+      <li>
+        <a href="javascript:logout();">
+          <i class="material-icons">account_circle</i>
+          Abmelden
+        </a>
+      </li>
+    </ul>
+    </header>
+
+    <main>
+      <div class="container">
+        <div class="row">
+          <div class="col s12 m8">
+            <div class="card">
+              <div class="card-content">
+                <span class="card-title">Auftragsübersicht</span>
+                <p>
+                  Die Auftragsübersicht bietet eine Übersicht über Ihre
+                  Aufträge. Nach erfolgreichem Abschluss können die Ergebnisse
+                  hier heruntergeladen werden.
+                </p>
+                <p>&nbsp;</p>
+                <div class="card-panel no-padding z-depth-0">
+                  <ul class="tabs">
+                    <li class="tab col s3">
+                      <a data-job-filter="" class="active">Alle</a>
+                    </li>
+                    <li class="tab col s3">
+                      <a data-job-filter="finished">Abgeschlossen</a>
+                    </li>
+                    <li class="tab col s3">
+                      <a data-job-filter="running">Laufend</a>
+                    </li>
+                    <li class="tab col s3">
+                      <a data-job-filter="queued">Wartend</a>
+                    </li>
+                  </ul>
+                </div>
+                <ul id="jobs-collapsible" class="collapsible expandable z-depth-0"></ul>
+              </div>
+            </div>
+          </div>
+          <div class="col s12 m4">
+            <div class="card">
+              <div class="card-content">
+                <span class="card-title">Linguistische Datenverarbeitung</span>
+                <p>
+                  <i class="material-icons medium blue-grey-text text-darken-2 left">format_textdirection_l_to_r</i>
+                  Mit Hilfe datenverarbeitender Methoden werden Textdaten mit
+                  weiteren Informationen angereichert.
+                </p>
+              </div>
+              <div class="card-action right-align">
+                <a href="nlp.html" class="waves-effect waves-light btn">Zum Dienst</a>
+              </div>
+            </div>
+
+            <div class="card">
+              <div class="card-content">
+                <span class="card-title">Texterkennung</span>
+                <p>
+                  <i class="material-icons medium blue-grey-text text-darken-2 left">find_in_page</i>
+                  Textdaten werden aus Scans oder Fotos zur anschließenden
+                  Weiterverarbeitung extrahiert.
+                </p>
+              </div>
+              <div class="card-action right-align">
+                <a href="ocr.html" class="waves-effect waves-light btn">Zum Dienst</a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+
+    <footer class="page-footer blue-grey darken-2">
+      <div class="container">
+        <div class="row">
+          <div class="col s12">
+            <p class="grey-text text-lighten-4 left">
+              <a href="https://www.uni-bielefeld.de/">
+                <img src="images/universitaet_bielefeld.png" alt="Logo: Universität Bielefeld" style="height: 72.5px">
+              </a>
+            </p>
+            <p class="grey-text text-lighten-4 right">
+              Gefördert durch die<br>
+              <a href="https://www.dfg.de/">
+                <img src="images/dfg.png" alt="Logo: Deutsche Forschungsgemeinschaft" style="height: 50px;">
+              </a>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer-copyright">
+        <div class="container">
+          © 2019 Copyright
+          <a class="grey-text text-lighten-4" href="https://www.uni-bielefeld.de/sfb1288">Universität Bielefeld | SFB 1288</a>
+          <a class="grey-text text-lighten-4 right" href="impressum.html">Impressum</a>
+        </div>
+      </div>
+    </footer>
+    <script src="js/materialize.min.js"></script>
+    <script>
+      M.AutoInit();
+    </script>
+    <script src="js/job_manager.js"></script>
+  </body>
+</html>
@@ -0,0 +1,110 @@
+function setUserCallback() {
+  userFormEMailElement.value = user["e-mail"];
+  userFormFirstNameElement.value = user["firstName"];
+  userFormLastNameElement.value = user["lastName"];
+  userFormNotificationsElement.checked = user["notifications"];
+  userFormPhoneElement.value = user["phone"];
+  M.updateTextFields();
+
+  userFormEMailElement.addEventListener("input", event => {
+    eMailChanged = (user["e-mail"] != userFormEMailElement.value) ? true : false;
+    evaluateUserForm();
+  });
+  userFormFirstNameElement.addEventListener("input", event => {
+    firstNameChanged = (user["firstName"] != userFormFirstNameElement.value) ? true : false;
+    evaluateUserForm();
+  });
+  userFormLastNameElement.addEventListener("input", event => {
+    lastNameChanged = (user["lastName"] != userFormLastNameElement.value) ? true : false;
+    evaluateUserForm();
+  });
+  userFormNotificationsElement.addEventListener("change", event => {
+    notificationsChanged = (user["notifications"] != userFormNotificationsElement.checked) ? true : false;
+    evaluateUserForm();
+  });
+  userFormPhoneElement.addEventListener("input", event => {
+    phoneChanged = (user["phone"] != userFormPhoneElement.value) ? true : false;
+    evaluateUserForm();
+  });
+  userFormResetElement.addEventListener("click", event => {
+    eMailChanged = false;
+    firstNameChanged = false;
+    lastNameChanged = false;
+    notificationsChanged = false;
+    phoneChanged = false;
+    userFormEMailElement.value = user["e-mail"];
+    userFormFirstNameElement.value = user["firstName"];
+    userFormLastNameElement.value = user["lastName"];
+    userFormNotificationsElement.checked = user["notifications"];
+    userFormPhoneElement.value = user["phone"];
+    evaluateUserForm();
+  });
+  userFormSubmitElement.addEventListener("click", event => {
+    if (eMailChanged) {
+      user["e-mail"] = userFormEMailElement.value;
+      eMailChanged = false;
+    }
+    if (firstNameChanged) {
+      user["firstName"] = userFormFirstNameElement.value;
+      firstNameChanged = false;
+    }
+    if (lastNameChanged) {
+      user["lastName"] = userFormLastNameElement.value;
+      lastNameChanged = false;
+    }
+    if (notificationsChanged) {
+      user["notifications"] = userFormNotificationsElement.checked;
+      notificationsChanged = false;
+    }
+    if (phoneChanged) {
+      user["phone"] = userFormPhoneElement.value;
+      phoneChanged = false;
+    }
+    localStorage.setItem("user", JSON.stringify(user));
+    M.toast({html: "Benutzerdaten wurden aktualisiert."});
+    evaluateUserForm();
+  });
+}
+
+
+function evaluateUserForm() {
+  var somethingChanged;
+
+  somethingChanged = eMailChanged || firstNameChanged || lastNameChanged || notificationsChanged || phoneChanged;
+
+  if (somethingChanged) {
+    userFormResetElement.classList.remove("disabled");
+    userFormSubmitElement.classList.remove("disabled");
+  } else {
+    userFormResetElement.classList.add("disabled");
+    userFormSubmitElement.classList.add("disabled");
+  }
+}
+
+
+var eMailChanged;
+var firstNameChanged;
+var lastNameChanged;
+var notificationsChanged;
+var phoneChanged;
+var userFormEMailElement;
+var userFormFirstNameElement;
+var userFormLastNameElement;
+var userFormNotificationsElement;
+var userFormPhoneElement;
+var userFormResetElement;
+var userFormSubmitElement;
+
+
+eMailChanged = false;
+firstNameChanged = false;
+lastNameChanged = false;
+notificationsChanged = false;
+phoneChanged = false;
+userFormFirstNameElement = document.getElementById("user-form-first-name");
+userFormLastNameElement = document.getElementById("user-form-last-name");
+userFormEMailElement = document.getElementById("user-form-e-mail");
+userFormNotificationsElement = document.getElementById("user-form-notifications");
+userFormPhoneElement = document.getElementById("user-form-phone");
+userFormResetElement = document.getElementById("user-form-reset");
+userFormSubmitElement = document.getElementById("user-form-submit");
@@ -0,0 +1,17 @@
+/**
+ * Process the submit event from the login form.
+ */
+function LoginFormSubmitHandler() {
+  var loginFormPasswordElement;
+  var loginFormUserElement;
+
+  loginFormPasswordElement = document.getElementById("login-form-password");
+  loginFormUserElement = document.getElementById("login-form-user");
+
+  try {
+    login(loginFormPasswordElement.value, loginFormUserElement.value);
+  } catch(e) {
+    loginFormPasswordElement.classList.add("invalid");
+    loginFormUserElement.classList.add("invalid");
+  }
+}
@@ -0,0 +1,43 @@
+function jobFormChangeHandler() {
+  if (jobFormFileElement.files.length === 0 || jobFormLanguageElement.value === "" || jobFormNameElement.value === "") {
+    jobFormSubmitElement.classList.add("disabled");
+  } else {
+    jobFormSubmitElement.classList.remove("disabled");
+  }
+}
+
+
+function jobFormSubmitHandler() {
+  createJob(jobFormFileElement.files[0], jobFormLanguageElement.value, jobFormNameElement.value, jobFormServiceElement.value, user["id"]);
+}
+
+
+var jobFormElement;
+var jobFormFileElement;
+var jobFormLanguageElement;
+var jobFormNameElement;
+var jobFormServiceElement;
+var jobFormSubmitElement;
+
+
+jobFormElement = document.getElementById("job_form");
+jobFormFileElement = document.getElementById("job_form_file");
+jobFormLanguageElement = document.getElementById("job_form_language");
+jobFormNameElement = document.getElementById("job_form_name");
+jobFormServiceElement = document.getElementById("job_form_service");
+jobFormSubmitElement =  document.getElementById("job_form_submit");
+
+
+jobFormFileElement.addEventListener("change", jobFormChangeHandler);
+jobFormLanguageElement.addEventListener("change", jobFormChangeHandler);
+jobFormNameElement.addEventListener("input", jobFormChangeHandler);
+
+M.Modal.init(
+  document.getElementById("create_job"),
+  {
+    "onCloseEnd": modal => {
+      jobFormElement.reset();
+      M.updateTextFields();
+    }
+  }
+);
@@ -0,0 +1,172 @@
+var JOBLANGUAGES = {
+  "nlp": {
+    "de": "Deutsch",
+    "en": "Englisch",
+    "fr": "Französisch",
+    "pt": "Portugisisch",
+    "es": "Spanisch"
+  },
+  "ocr": {
+    "deu": "Deutsch",
+    "deu_frak": "Deutsch (Fraktur)",
+    "eng": "Englisch",
+    "fra": "Französisch",
+    "por": "Portugisisch",
+    "spa": "Spanisch"
+  }
+};
+var JOBSERVICEICONS = {
+  "nlp": "format_textdirection_l_to_r",
+  "ocr": "find_in_page"
+};
+var JOBSTATUSCOLORS = {
+  "failed": "pink",
+  "finished": "teal",
+  "queued": "amber",
+  "running": "indigo"
+};
+var JOBSTATUSNAMES = {
+  "failed": 'Fehlgeschlagen',
+  "finished": 'Abgeschlossen',
+  "queued": 'Wartend',
+  "running": 'Laufend'
+}
+var JOBSTATUSTEXTS = {
+  'failed': 'Es ist ein Fehler bei der Bearbeitung des Auftrages aufgetreten. \
+             Für weitere Informationen wenden Sie sich mit dem \
+             Auftragskennzeichen an den Seitenbetreiber.',
+  'finished': 'Der Auftrag ist abgeschlossen, die Ergebnisse können nun \
+               heruntergeladen werden. Die Quelldatei bleibt verfügbar und \
+               kann jederzeit abgerufen werden.',
+  'queued': 'Der Auftrag befindet sich in der Warteschlange und wird vom \
+             System bearbeitet, sobald Rechenkapazität verfügbar ist.',
+  'running': 'Dieser Auftrag wird gerade bearbeitet, sobald der Vorgang \
+              abgeschlossen wurde, können die Ergebnisse hier heruntergeladen \
+              werden.'
+}
+
+
+var jobsCollapsibleElement;
+var jobStatusFilter;
+
+jobsCollapsibleElement = document.getElementById("jobs-collapsible");
+jobStatusFilter = '';
+
+
+M.Collapsible.init(
+  jobsCollapsibleElement,
+  {accordion: false}
+);
+document.querySelectorAll('[data-job-filter]').forEach(jobFilterElement => {
+  jobFilterElement.addEventListener("click", event => {
+    jobStatusFilter = event.currentTarget.getAttribute("data-job-filter");
+    jobListManager();
+  });
+});
+
+
+function jobListManager() {
+  jobs.forEach(job => {
+    var jobElement;
+
+    jobElement = document.getElementById(job["id"]);
+    // Check whether an element with id = job['id'] is found
+    if (jobElement) {
+      var jobResultElement;
+      var jobStatusElement;
+      var jobStatusTextElement;
+
+      jobResultElement = jobElement.querySelector('.job-result');
+      jobStatusElement = jobElement.querySelector('.job-status');
+      jobStatusTextElement = jobElement.querySelector('.job-status-text');
+
+      // Check whether the job status changed since it got printed
+      if (jobStatusElement.innerHTML != JOBSTATUSNAMES[job["status"]]) {
+        // Update the job status element (label and color)
+        jobStatusElement.innerHTML = JOBSTATUSNAMES[job["status"]];
+        jobStatusElement.classList.remove("pink", "teal", "amber", "indigo");
+        jobStatusElement.classList.add(JOBSTATUSCOLORS[job["status"]]);
+        // Update the job status text element
+        jobStatusTextElement.innerHTML = JOBSTATUSTEXTS[job["status"]];
+        // Check whether the new job status is 'finished'
+        if (job["status"] === "finished") {
+        // Unhide the jobs result element
+        jobResultElement.classList.remove("hide");
+        }
+      }
+      // If the job status doesn't match the current filter, remove it
+      //if (jobStatusFilter != "" && job["status"] != jobStatusFilter) jobElement.remove();
+      // If the job status doesn't match the current filter, hide it
+      if (jobStatusFilter != "" && job["status"] != jobStatusFilter) {
+        jobElement.classList.add('hide');
+      } else {
+        jobElement.classList.remove('hide');
+      }
+    } else {
+      // If the job status doesn't match the current filter, skip it
+      //if (jobStatusFilter != "" && job["status"] != jobStatusFilter) return;
+      jobElement = document.createElement("li");
+      jobElement.setAttribute("id", job["id"]);
+      // If the job status doesn't match the current filter, skip it
+      if (jobStatusFilter != "" && job["status"] != jobStatusFilter) {
+        jobElement.classList.add('hide');
+      } else {
+        jobElement.classList.remove('hide');
+      }
+      jobElement.innerHTML =
+        '<div class="collapsible-header">'
+          + '<i class="material-icons dropdown-indicator">arrow_drop_down</i>'
+          + '<i class="material-icons">'
+            + JOBSERVICEICONS[job["service"]]
+          + '</i>'
+          + job["name"]
+          + '<span class="job-status new badge ' + JOBSTATUSCOLORS[job["status"]] + '" data-badge-caption="">'
+            + JOBSTATUSNAMES[job["status"]]
+          + '</span>'
+        + '</div>'
+        + '<div class="collapsible-body">'
+          + '<p class="job-status-text">' + JOBSTATUSTEXTS[job["status"]] + '</p>'
+          + '<p>&nbsp;</p>'
+          + '<p class="overflow-hidden">'
+            + '<i class="material-icons blue-grey-text text-darken-2 left">bookmark</i>'
+            + 'Auftragskennzeichen: '
+            + job["id"]
+          + '</p>'
+          + '<p class="overflow-hidden">'
+            + '<i class="material-icons blue-grey-text text-darken-2 left">insert_drive_file</i>'
+            + 'Datei: '
+            + '<a href="../vre_files/jobs/' + job["id"] + '/' + job["file"] + '">'
+              + job["file"]
+            + '</a>'
+          + '</p>'
+          + '<p class="overflow-hidden">'
+            + '<i class="material-icons blue-grey-text text-darken-2 left">language</i>'
+            + 'Sprache: '
+            + JOBLANGUAGES[job["service"]][job["language"]]
+          + '</p>'
+          + '<p class="job-result' + (job['status'] != 'finished' ? ' hide' : '') + ' overflow-hidden">'
+            + '<i class="material-icons blue-grey-text text-darken-2 left">archive</i>'
+            + 'Ergebnisse: '
+            + '<a href="../vre_files/jobs/' + job["id"] + '/' + job["file"].split(".").slice(0, -1).join(".") + '_-_' + job["service"] + '.zip">'
+              + 'Download'
+            + '</a>'
+          + '</p>'
+        + '</div>';
+
+      jobElement.querySelector('.collapsible-header').addEventListener("click", event => {
+        var dropdownIndicatorElement;
+
+        dropdownIndicatorElement = event.currentTarget.querySelector('.dropdown-indicator');
+        if (dropdownIndicatorElement.innerHTML === "arrow_drop_down") {
+          dropdownIndicatorElement.innerHTML = "arrow_drop_up";
+        } else {
+          dropdownIndicatorElement.innerHTML = "arrow_drop_down";
+        }
+      });
+      jobsCollapsibleElement.appendChild(jobElement);
+    }
+  });
+}
+
+
+setJobsCallback = jobListManager;
@@ -0,0 +1,6 @@
+/*!
+ * Materialize v1.0.0 (http://materializecss.com)
+ * Copyright 2014-2017 Materialize
+ * MIT License (https://raw.githubusercontent.com/Dogfalo/materialize/master/LICENSE)
+ */
+var _get=function t(e,i,n){null===e&&(e=Function.prototype);var s=Object.getOwnPropertyDescriptor(e,i);if(void 0===s){var o=Object.getPrototypeOf(e);return null===o?void 0:t(o,i,n)}if("value"in s)return s.value;var a=s.get;return void 0!==a?a.call(n):void 0},_createClass=function(){function n(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(t,e,i){return e&&n(t.prototype,e),i&&n(t,i),t}}();function _possibleConstructorReturn(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function _inherits(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}function _classCallCheck(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}window.cash=function(){var i,o=document,a=window,t=Array.prototype,r=t.slice,n=t.filter,s=t.push,e=function(){},h=function(t){return typeof t==typeof e&&t.call},d=function(t){return"string"==typeof t},l=/^#[\w-]*$/,u=/^\.[\w-]*$/,c=/<.+>/,p=/^\w+$/;function v(t,e){e=e||o;var i=u.test(t)?e.getElementsByClassName(t.slice(1)):p.test(t)?e.getElementsByTagName(t):e.querySelectorAll(t);return i}function f(t){if(!i){var e=(i=o.implementation.createHTMLDocument(null)).createElement("base");e.href=o.location.href,i.head.appendChild(e)}return i.body.innerHTML=t,i.body.childNodes}function m(t){"loading"!==o.readyState?t():o.addEventListener("DOMContentLoaded",t)}function g(t,e){if(!t)return this;if(t.cash&&t!==a)return t;var i,n=t,s=0;if(d(t))n=l.test(t)?o.getElementById(t.slice(1)):c.test(t)?f(t):v(t,e);else if(h(t))return m(t),this;if(!n)return this;if(n.nodeType||n===a)this[0]=n,this.length=1;else for(i=this.length=n.length;s<i;s++)this[s]=n[s];return this}function _(t,e){return new g(t,e)}var y=_.fn=_.prototype=g.prototype={cash:!0,length:0,push:s,splice:t.splice,map:t.map,init:g};function k(t,e){for(var i=t.length,n=0;n<i&&!1!==e.call(t[n],t[n],n,t);n++);}function b(t,e){var i=t&&(t.matches||t.webkitMatchesSelector||t.mozMatchesSelector||t.msMatchesSelector||t.oMatchesSelector);return!!i&&i.call(t,e)}function w(e){return d(e)?b:e.cash?function(t){return e.is(t)}:function(t,e){return t===e}}function C(t){return _(r.call(t).filter(function(t,e,i){return i.indexOf(t)===e}))}Object.defineProperty(y,"constructor",{value:_}),_.parseHTML=f,_.noop=e,_.isFunction=h,_.isString=d,_.extend=y.extend=function(t){t=t||{};var e=r.call(arguments),i=e.length,n=1;for(1===e.length&&(t=this,n=0);n<i;n++)if(e[n])for(var s in e[n])e[n].hasOwnProperty(s)&&(t[s]=e[n][s]);return t},_.extend({merge:function(t,e){for(var i=+e.length,n=t.length,s=0;s<i;n++,s++)t[n]=e[s];return t.length=n,t},each:k,matches:b,unique:C,isArray:Array.isArray,isNumeric:function(t){return!isNaN(parseFloat(t))&&isFinite(t)}});var E=_.uid="_cash"+Date.now();function M(t){return t[E]=t[E]||{}}function O(t,e,i){return M(t)[e]=i}function x(t,e){var i=M(t);return void 0===i[e]&&(i[e]=t.dataset?t.dataset[e]:_(t).attr("data-"+e)),i[e]}y.extend({data:function(e,i){if(d(e))return void 0===i?x(this[0],e):this.each(function(t){return O(t,e,i)});for(var t in e)this.data(t,e[t]);return this},removeData:function(s){return this.each(function(t){return i=s,void((n=M(e=t))?delete n[i]:e.dataset?delete e.dataset[i]:_(e).removeAttr("data-"+name));var e,i,n})}});var L=/\S+/g;function T(t){return d(t)&&t.match(L)}function $(t,e){return t.classList?t.classList.contains(e):new RegExp("(^| )"+e+"( |$)","gi").test(t.className)}function B(t,e,i){t.classList?t.classList.add(e):i.indexOf(" "+e+" ")&&(t.className+=" "+e)}function D(t,e){t.classList?t.classList.remove(e):t.className=t.className.replace(e,"")}y.extend({addClass:function(t){var n=T(t);return n?this.each(function(e){var i=" "+e.className+" ";k(n,function(t){B(e,t,i)})}):this},attr:function(e,i){if(e){if(d(e))return void 0===i?this[0]?this[0].getAttribute?this[0].getAttribute(e):this[0][e]:void 0:this.each(function(t){t.setAttribute?t.setAttribute(e,i):t[e]=i});for(var t in e)this.attr(t,e[t]);return this}},hasClass:function(t){var e=!1,i=T(t);return i&&i.length&&this.each(function(t){return!(e=$(t,i[0]))}),e},prop:function(e,i){if(d(e))return void 0===i?this[0][e]:this.each(function(t){t[e]=i});for(var t in e)this.prop(t,e[t]);return this},removeAttr:function(e){return this.each(function(t){t.removeAttribute?t.removeAttribute(e):delete t[e]})},removeClass:function(t){if(!arguments.length)return this.attr("class","");var i=T(t);return i?this.each(function(e){k(i,function(t){D(e,t)})}):this},removeProp:function(e){return this.each(function(t){delete t[e]})},toggleClass:function(t,e){if(void 0!==e)return this[e?"addClassLine truncated
@@ -0,0 +1,154 @@
+var JOBSPOLLINTERVALL = 1000;
+var USERS = {
+  "testbenutzer": {
+    "e-mail": "t.benutzer@uni-bielefeld.de",
+    "firstName": "Test",
+    "id": "testbenutzer",
+    "lastName": "Benutzer",
+    "notifications": true,
+    "password": "passwort",
+    "phone": "+49 521 106-XXXXX"
+  }
+};
+
+
+// The job list of the current user
+var jobs;
+// The current user
+var user;
+
+
+/**
+ * Login a user and redirect the visitor to the portal page.
+ * @param {string} password - The password to use for login.
+ * @param {string} user - The user to use for login.
+ */
+function login(password, user) {
+  // Check if the user exists
+  if (USERS[user]) {
+  // Check if the password is correct
+  if (USERS[user]["password"] === password) {
+    // Save the user data to the local storage
+    localStorage.setItem("user", JSON.stringify(USERS[user]));
+    // Redirect the visitor to the portal page
+    window.location = "/vre/portal.html";
+    return;
+  }
+  }
+  // The function only ends here, when the user doesn't exists or when the
+  // password was wrong, in both cases it should throw an exception
+  throw "User doesn't exist or password was wrong!";
+}
+
+
+/**
+ * Logout the current user and redirect the visitor to the login page.
+ */
+function logout() {
+  // delete all data from the local storage
+  localStorage.clear();
+  // redirect to the login page
+  window.location = "/vre/";
+}
+
+
+/**
+ * The main function, which is executed on each page after it's completly
+ * loaded.
+ */
+function main() {
+  M.Dropdown.init(
+  document.getElementById("main-nav-account"),
+  {"constrainWidth": false, "coverTrigger": false}
+  );
+
+  // Indicates whether the current page is the login page
+  var isLoginPage;
+  // Indicates whether the current page is a service page (like ocr or nlp)
+  var isServicePage;
+
+
+  isLoginPage = window.location.pathname === "/vre/" || window.location.pathname === "/vre/index.html";
+  isServicePage = window.location.pathname === "/vre/nlp.html" || window.location.pathname === "/vre/ocr.html";
+
+  // Check if the visitor is logged in, by checking if the local storage
+  // contains a user
+  if (localStorage.getItem("user")) {
+  // Redirect to the portal page if the current page is the login page
+  if (isLoginPage) window.location = "portal.html";
+  // Load user from the local storage
+  user = JSON.parse(localStorage.getItem("user"));
+  // If a function named setUserCallback exists, call it
+  if (typeof(setUserCallback) === "function") setUserCallback();
+  } else {
+  // Redirect to the login page if the current page isn't the login page
+  if (!isLoginPage) window.location = "index.html";
+  return;
+  }
+
+  // Check if the local storage contains a copy of the users job list
+  if (localStorage.getItem("jobs")) {
+  // Load the job list from the local storage
+  jobs = JSON.parse(localStorage.getItem("jobs"));
+  // If a function named setJobsCallback exists, call it
+  if (typeof(setJobsCallback) === "function") setJobsCallback();
+  } else {
+  // Load the job list from the vre server
+  getJobs({"user": user["id"]}, function(newJobs) {
+    jobs = newJobs;
+    // If a function named setJobsCallback exists, call it
+    if (typeof(setJobsCallback) === "function") setJobsCallback();
+  });
+  }
+
+  // Set a continous poll for the job list
+  setInterval(getJobs, JOBSPOLLINTERVALL, {"user": user["id"]}, updateJobs);
+}
+
+
+/**
+ * Updates the job list in the local storage and the contents of the global
+ * job list variable. It also informs the visitor about job status changes.
+ * @param {Object[]} newJobs - The new job list.
+ */
+function updateJobs(newJobs) {
+  var i;
+  // Indicates whether the new job list differs from the old one
+  var hasJobsChanged;
+  // The new job list as JSON string
+  var newJobsAsJSONString;
+
+  newJobsAsJSONString = JSON.stringify(newJobs);
+  hasJobsChanged = localStorage.getItem("jobs") != newJobsAsJSONString;
+
+  if (hasJobsChanged) {
+  // Iterate over the old job list
+  for (i = 0; i < jobs.length; i++) {
+    // Check whether the status of the currently iterated job changed
+    if (jobs[i]["status"] != newJobs[i]["status"]) {
+    // Inform the visitor with a toast message about the new status
+    switch (newJobs[i]["status"]) {
+      case "failed":
+      M.toast({html: "Auftrag '" + jobs[i]["name"] + "' is fehlgeschlagen."});
+      break;
+      case "finished":
+      M.toast({html: "Auftrag '" + jobs[i]["name"] + "' wurde abgeschlossen."});
+      break;
+      case "running":
+      M.toast({html: "Auftrag '" + jobs[i]["name"] + "' wird bearbeitet."});
+      break;
+      default:
+    }
+    }
+  }
+  // Save the new job list to the local storage
+  localStorage.setItem("jobs", newJobsAsJSONString);
+  // Replace the global job list variable with the new job list
+  jobs = newJobs;
+  // If a function named setJobsCallback exists, call it
+  if (typeof(setJobsCallback) === "function") setJobsCallback();
+  }
+}
+
+
+window.onload = main;
@@ -0,0 +1,180 @@
+var VREMANAGER = "http://" + window.location.hostname + ":5000";
+
+
+/**
+ * Sends an asynchronous HTTP request to the vre manager in order to create a
+ * new job.
+ * @param {File} file - The file to process with the job.
+ * @param {string} language - The language of the file contents.
+ * @param {string} name - A name for the job, this doesn't have to be unique.
+ * @param {string} service - The service this job belongs to.
+ * @param {string} user - The user this job belongs to.
+ * @param {function} [callback] - A function, that is called after the HTTP
+ * request finished.
+ */
+function createJob(file, language, name, service, user, callback = console.log) {
+  var formData;
+  var oReq;
+  var query;
+
+  formData = new FormData();
+  formData.append("file", file);
+
+  oReq = new XMLHttpRequest();
+  oReq.addEventListener("loadend", function(oEvent) {
+    if (this.status === 201) {
+      M.toast({html: "Auftrag '" + name + "' wurde erstellt."});
+      callback(JSON.parse(this.responseText));
+    } else {
+      if (this.status === 415) {
+        M.toast({html: "Auftrag '" + name + "' konnte nicht erstellt werden.<br>(Unerwarteter Dateityp)"});
+      } else {
+        M.toast({html: "Auftrag '" + name + "' konnte nicht erstellt werden.<br>(Fehlercode: " + this.status + ")"});
+      }
+    }
+  });
+
+  query = "?language=" + language + "&name=" + name + "&service=" + service + "&user=" + user;
+
+  oReq.open("POST", VREMANAGER + "/vre/jobs" + query);
+  oReq.send(formData);
+}
+
+
+/**
+ * Sends an asynchronous HTTP request to the vre manager in order to delete an
+ * existing job.
+ * @param {string} id - The id of the job to be deleted.
+ * @param {function} [callback] - A function, that is called after the HTTP
+ * request finished.
+ */
+function deleteJob(id, callback = console.log) {
+  var oReq;
+
+  oReq = new XMLHttpRequest();
+  oReq.addEventListener("loadend", function(oEvent) {
+    if (this.status === 204) {
+      M.toast({html: "Auftrag '" + id + "' wurde gelöscht."});
+      callback();
+    } else {
+      M.toast({html: "Auftrag '" + id + "' konnte nicht gelöscht werden.<br>(Fehlercode: " + this.status + ")"});
+    }
+  });
+
+  oReq.open("DELETE", VREMANAGER + "/vre/jobs/" + id);
+  oReq.send();
+}
+
+
+/**
+ * Sends an asynchronous HTTP request to the vre manager in order to get all
+ * informations about a specific and existing job.
+ * @param {string} id - The id of the job to get the information from.
+ * @param {function} [callback] - A function, that is called after the HTTP
+ * request finished.
+ */
+function getJob(id, callback = console.log) {
+  var oReq;
+
+  oReq = new XMLHttpRequest();
+  oReq.addEventListener("loadend", function(oEvent) {
+    if (this.status === 200) {
+      callback(JSON.parse(this.responseText));
+    }
+  });
+
+  oReq.open("GET", VREMANAGER + "/vre/jobs/" + id);
+  oReq.send();
+}
+
+
+/**
+ * Sends an asynchronous HTTP request to the vre manager in order to get a
+ * (filtered) list of all jobs.
+ * @param {object} [filters=null] - An object containing filters. E.g.
+ * {'service': 'nlp', 'status': 'finished'}
+ * @param {function} [callback] - A function, that is called after the HTTP
+ * request finished.
+ */
+function getJobs(filters = null, callback = console.log) {
+  var oReq;
+  var query;
+
+  oReq = new XMLHttpRequest();
+  oReq.addEventListener("loadend", function(oEvent) {
+    if (this.status === 200) {
+      callback(JSON.parse(this.responseText));
+    }
+  });
+
+  query = ""
+  if (filters) {
+    if (filters["name"]) {
+      query += (query === "") ? "?" : "&";
+      query += "name=" + filters["name"];
+    }
+    if (filters["service"]) {
+      query += (query === "") ? "?" : "&";
+      query += "service=" + filters["service"];
+    }
+    if (filters["status"]) {
+      query += (query === "") ? "?" : "&";
+      query += "status=" + filters["status"];
+    }
+    if (filters["user"]) {
+      query += (query === "") ? "?" : "&";
+      query += "user=" + filters["user"];
+    }
+  }
+
+  oReq.open("GET", VREMANAGER + "/vre/jobs" + query);
+  oReq.send();
+}
+
+
+/**
+ * Sends an asynchronous HTTP request to the vre manager in order to update the
+ * values of a specific and existing job.
+ * @param {string} id - The id of the job to update.
+ * @param {object} [newValues=null] - An object containing the new values. E.g.
+ * {'status': 'finished'}
+ * @param {function} [callback] - A function, that is called after the HTTP
+ * request finished.
+ */
+function updateJob(id, newValues = null, callback = console.log) {
+  var oReq;
+  var query;
+
+  oReq = new XMLHttpRequest();
+  oReq.addEventListener("loadend", function(oEvent) {
+    if (this.status === 200) {
+      M.toast({html: "Auftrag '" + id + "' wurde aktualisiert."});
+      callback(JSON.parse(this.responseText));
+    } else {
+      M.toast({html: "Auftrag '" + id + "' konnte nicht aktualisiert werden.<br>(Fehlercode: " + this.status + ")"});
+    }
+  });
+
+  query = ""
+  if (newValues) {
+    if (newValues["name"]) {
+      query += (query === "") ? "?" : "&";
+      query += "name=" + newValues["name"];
+    }
+    if (newValues["language"]) {
+      query += (query === "") ? "?" : "&";
+      query += "language=" + newValues["language"];
+    }
+    if (newValues["report"]) {
+      query += (query === "") ? "?" : "&";
+      query += "report=" + newValues["report"];
+    }
+    if (newValues["status"]) {
+      query += (query === "") ? "?" : "&";
+      query += "status=" + newValues["status"];
+    }
+  }
+
+  oReq.open("PUT", VREMANAGER + "/vre/jobs/" + id + query);
+  oReq.send();
+}
@@ -0,0 +1,295 @@
+<!DOCTYPE html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8">
+    <title>Opaque | Linguistische Datenverarbeitung</title>
+    <link href="/vre/images/sfb_1288.png" rel="icon" type="image/png">
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <link rel="stylesheet" href="css/materialize.min.css">
+    <link rel="stylesheet" href="css/style.css">
+    <script src="js/vre_manager_rest.js"></script>
+    <script src="js/vre.js"></script>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  </head>
+  <body class="blue-grey lighten-5">
+    <header>
+      <ul id="main-nav-account-dropdown" class="dropdown-content">
+        <li>
+          <a href="account.html">Benutzerverwaltung</a>
+        </li>
+        <li class="divider"></li>
+        <li>
+          <a href="javascript:logout();">Abmelden</a>
+        </li>
+      </ul>
+      <nav class="blue-grey darken-2">
+        <div class="container">
+          <div class="nav-wrapper">
+            <a href="portal.html" class="brand-logo">
+              <i class="material-icons hide-on-small-only">cloud</i>
+              Opaque
+            </a>
+            <a href="#" data-target="main-nav-mobile" class="sidenav-trigger">
+              <i class="material-icons">menu</i>
+            </a>
+            <ul id="main-nav" class="right hide-on-med-and-down">
+              <li>
+                <a href="job_manager.html">
+                  <i class="material-icons left">work</i>
+                  Auftragsübersicht
+                </a>
+              </li>
+              <li class="active">
+                <a href="nlp.html">
+                  <i class="material-icons left">format_textdirection_l_to_r</i>
+                  Linguistische Datenverarbeitung
+                </a>
+              </li>
+              <li>
+                <a href="ocr.html">
+                  <i class="material-icons left">find_in_page</i>
+                  Texterkennung
+                </a>
+              </li>
+              <li>
+                <a id="main-nav-account" class="dropdown-trigger" href="#!" data-target="main-nav-account-dropdown">
+                  <i class="material-icons left">account_circle</i>
+                  Benutzer
+                  <i class="material-icons right">arrow_drop_down</i>
+                </a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </nav>
+      <ul class="sidenav" id="main-nav-mobile">
+      <li>
+        <a href="job_manager.html">
+          <i class="material-icons left">work</i>
+          Auftragsübersicht
+        </a>
+      </li>
+      <li class="active">
+        <a href="nlp.html">
+          <i class="material-icons left">format_textdirection_l_to_r</i>
+          Linguistische Datenverarbeitung
+        </a>
+      </li>
+      <li>
+        <a href="ocr.html">
+          <i class="material-icons left">find_in_page</i>
+          Texterkennung
+        </a>
+      </li>
+      <li>
+        <a href="account.html">
+          <i class="material-icons">account_circle</i>
+          Benutzer
+        </a>
+      </li>
+      <li>
+        <a href="javascript:logout();">
+          <i class="material-icons">account_circle</i>
+          Abmelden
+        </a>
+      </li>
+    </ul>
+    </header>
+
+    <main>
+      <div class="container">
+        <div class="row">
+          <div class="col s12 m8">
+            <div class="card">
+              <div class="card-content">
+                <span class="card-title">Linguistische Datenverarbeitung</span>
+                <p>
+                  Mit Hilfe computergestützter linguistischer
+                  Datenverarbeitungsmethoden können Textdateien mit weiteren
+                  Informationen angereichert werden. Auf dieser Plattform werden
+                  derzeit die im folgenden aufgeführten
+                  Textverarbeitungsroutinen in automatisierter Form zur
+                  Verfügung gestellt.
+                </p>
+                <div class="row">
+                  <div class="col s12 m6">
+                    <div class="card z-depth-0">
+                      <div class="card-content">
+                        <span class="card-title">
+                          <i class="material-icons blue-grey-text text-darken-2 left">layers</i>
+                          Tokenisierung
+                        </span>
+                        <p>
+                          Aufteilung eines Textes in Sätze und Wörter. Dies
+                          ist zur weiteren Verarbeitung notwendig.
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col s12 m6">
+                    <div class="card z-depth-0">
+                      <div class="card-content">
+                        <span class="card-title">
+                          <i class="material-icons blue-grey-text text-darken-2 left">layers</i>
+                          Lemmatisierung
+                        </span>
+                        <p>
+                          Reduktion der Flexionsformen eines Wortes auf dessen
+                          Grundform.
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col s12 m6">
+                    <div class="card z-depth-0">
+                      <div class="card-content">
+                        <span class="card-title">
+                          <i class="material-icons blue-grey-text text-darken-2 left">layers</i>
+                          Part-of-speech-Tagging
+                        </span>
+                        <p>
+                          Kontext- und definitionsbezogene Zuordnung von Wörtern
+                          und Satzzeichen zu Wortarten.
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col s12 m6">
+                    <div class="card z-depth-0">
+                      <div class="card-content">
+                        <span class="card-title">
+                          <i class="material-icons blue-grey-text text-darken-2 left">layers</i>
+                          Eigennamenerkennung
+                        </span>
+                        <p>
+                          Identifikation von Wörtern, die eine Entität
+                          beschreiben, wie Firmen- und Personennamen.
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <p>
+                  Die Ausgabe erfolgt in Form einer <i>verticalized text</i>
+                  Datei (Dateiendung: .vrt). In diesem Format kann der Text
+                  einfach in Auswertungsprogramme, wie zum Beispiel der <a href="http://cwb.sourceforge.net/">IMS Open Corpus Workbench</a>,
+                  eingefügt werden.
+                </p>
+              </div>
+            </div>
+          </div>
+          <div class="col s12 m4">
+            <div class="card">
+              <div class="card-content">
+                <span class="card-title">Auftrag erstellen</span>
+                <p>
+                  <i class="material-icons medium blue-grey-text text-darken-2 left">playlist_add</i>
+                  Auftragsformular zur linguistische Datenverarbeitung von
+                  Textdateien.
+                </p>
+              </div>
+              <div class="card-action right-align">
+                <a href="#create_job" class="waves-effect waves-light btn modal-trigger">Erstellen</a>
+              </div>
+            </div>
+
+            <div class="card">
+              <div class="card-content">
+                <span class="card-title">Auftragsübersicht</span>
+                <p>
+                  <i class="material-icons medium blue-grey-text text-darken-2 left">work</i>
+                  Hier wird der aktuelle Status sämtlicher vom Benutzer
+                  erstellten Aufträge aufgelistet.
+                </p>
+              </div>
+              <div class="card-action right-align">
+                <a href="job_manager.html" class="waves-effect waves-light btn">Öffnen</a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div id="create_job" class="modal overflow-visible">
+        <div class="modal-content">
+          <h4 style="line-height: 60px;"><i class="material-icons medium blue-grey-text text-darken-2 left">playlist_add</i>Linguistische Datenverarbeitung</h4>
+          <p>
+            Um den Auftrag abschicken zu können, müssen alle Formularfelder
+            ausgefüllt werden. Anschließend erhalten Sie fortlaufende
+            Benachrichtigungen über den aktuellen Bearbeitungsstand des
+            Auftrags. Nach erfolgreicher Bearbeitung, stehen die Ergebnisse in
+            der <a href="job_manager.html">Auftragsverwaltung</a> zum Download
+            zur Verfügung.
+          </p>
+          <form id="job_form" class="row">
+            <div class="input-field col s12">
+              <input placeholder="Mein Auftragsname" id="job_form_name" type="text" class="validate">
+              <label for="job_form_name">Auftragsname</label>
+            </div>
+            <div class="file-field input-field col s12 m6">
+              <div class="btn">
+                <span>Datei</span>
+                <input id="job_form_file" type="file" accept="text/plain">
+              </div>
+              <div class="file-path-wrapper">
+                <input class="file-path validate" type="text">
+              </div>
+            </div>
+            <div class="input-field col s12 m6">
+              <select id="job_form_language">
+                <option value="" disabled selected>Option auswählen</option>
+                <option value="de">Deutsch</option>
+                <option value="en">Englisch</option>
+                <option value="fr">Französisch</option>
+                <option value="pt">Portugisisch</option>
+                <option value="es">Spanisch</option>
+              </select>
+              <label>Sprache der Eingabedatei</label>
+            </div>
+            <div class="input-field col s12 m6 hide">
+              <select id="job_form_service">
+                <option value="nlp" selected></option>
+              </select>
+            </div>
+          </form>
+        </div>
+        <div class="modal-footer">
+          <a href="#!" class="modal-close waves-effect waves-green btn-flat">Abbrechen</a>
+          <a href="javascript:jobFormSubmitHandler();" id="job_form_submit" class="modal-close waves-effect waves-green btn disabled">Abschicken</a>
+        </div>
+      </div>
+    </main>
+
+    <footer class="page-footer blue-grey darken-2">
+      <div class="container">
+        <div class="row">
+          <div class="col s12">
+            <p class="grey-text text-lighten-4 left">
+              <a href="https://www.uni-bielefeld.de/">
+                <img src="images/universitaet_bielefeld.png" alt="Logo: Universität Bielefeld" style="height: 72.5px">
+              </a>
+            </p>
+            <p class="grey-text text-lighten-4 right">
+              Gefördert durch die<br>
+              <a href="https://www.dfg.de/">
+                <img src="images/dfg.png" alt="Logo: Deutsche Forschungsgemeinschaft" style="height: 50px;">
+              </a>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer-copyright">
+        <div class="container">
+          © 2019 Copyright
+          <a class="grey-text text-lighten-4" href="https://www.uni-bielefeld.de/sfb1288">Universität Bielefeld | SFB 1288</a>
+          <a class="grey-text text-lighten-4 right" href="impressum.html">Impressum</a>
+        </div>
+      </div>
+    </footer>
+    <script src="js/materialize.min.js"></script>
+    <script>
+      M.AutoInit();
+    </script>
+    <script src="js/job_form_handler.js"></script>
+  </body>
+</html>
@@ -0,0 +1,293 @@
+<!DOCTYPE html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8">
+    <title>Opaque | Texterkennung</title>
+    <link href="/vre/images/sfb_1288.png" rel="icon" type="image/png">
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <link rel="stylesheet" href="css/materialize.min.css">
+    <link rel="stylesheet" href="css/style.css">
+    <script src="js/vre_manager_rest.js"></script>
+    <script src="js/vre.js"></script>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  </head>
+  <body class="blue-grey lighten-5">
+    <header>
+      <ul id="main-nav-account-dropdown" class="dropdown-content">
+        <li>
+          <a href="account.html">Benutzerverwaltung</a>
+        </li>
+        <li class="divider"></li>
+        <li>
+          <a href="javascript:logout();">Abmelden</a>
+        </li>
+      </ul>
+      <nav class="blue-grey darken-2">
+        <div class="container">
+          <div class="nav-wrapper">
+            <a href="portal.html" class="brand-logo">
+              <i class="material-icons hide-on-small-only">cloud</i>
+              Opaque
+            </a>
+            <a href="#" data-target="main-nav-mobile" class="sidenav-trigger">
+              <i class="material-icons">menu</i>
+            </a>
+            <ul id="main-nav" class="right hide-on-med-and-down">
+              <li>
+                <a href="job_manager.html">
+                  <i class="material-icons left">work</i>
+                  Auftragsübersicht
+                </a>
+              </li>
+              <li>
+                <a href="nlp.html">
+                  <i class="material-icons left">format_textdirection_l_to_r</i>
+                  Linguistische Datenverarbeitung
+                </a>
+              </li>
+              <li class="active">
+                <a href="ocr.html">
+                  <i class="material-icons left">find_in_page</i>
+                  Texterkennung
+                </a>
+              </li>
+              <li>
+                <a id="main-nav-account" class="dropdown-trigger" href="#!" data-target="main-nav-account-dropdown">
+                  <i class="material-icons left">account_circle</i>
+                  Benutzer
+                  <i class="material-icons right">arrow_drop_down</i>
+                </a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </nav>
+      <ul class="sidenav" id="main-nav-mobile">
+      <li>
+        <a href="job_manager.html">
+          <i class="material-icons left">work</i>
+          Auftragsübersicht
+        </a>
+      </li>
+      <li>
+        <a href="nlp.html">
+          <i class="material-icons left">format_textdirection_l_to_r</i>
+          Linguistische Datenverarbeitung
+        </a>
+      </li>
+      <li class="active">
+        <a href="ocr.html">
+          <i class="material-icons left">find_in_page</i>
+          Texterkennung
+        </a>
+      </li>
+      <li>
+        <a href="account.html">
+          <i class="material-icons">account_circle</i>
+          Benutzer
+        </a>
+      </li>
+      <li>
+        <a href="javascript:logout();">
+          <i class="material-icons">account_circle</i>
+          Abmelden
+        </a>
+      </li>
+    </ul>
+    </header>
+
+    <main>
+      <div class="container">
+        <div class="row">
+          <div class="col s12 m8">
+            <div class="card">
+              <div class="card-content">
+                <span class="card-title">Texterkennung</span>
+                <p>
+                  Der hier zur Verfügung gestellte Dienst basiert auf Verfahren der
+                  optischen Zeichenerkennung. Dabei werden durch optische Analysemethoden
+                  und einen anschließenden Abgleich mit Wörterbüchern aus Bilddaten,
+                  wie Fotos oder Scans, Textdaten erzeugt. Erst dieser Vorverarbeitungsschritt
+                  ermöglicht eine computergestützte Verarbeitung von Dokumenten.
+                </p>
+                <div class="row">
+                  <div class="col s12 m6">
+                    <div class="card z-depth-0">
+                      <div class="card-content">
+                        <span class="card-title">
+                          <i class="material-icons blue-grey-text text-darken-2 left">layers</i>
+                          Eingabe von Bilddaten
+                        </span>
+                        <p>
+                          Über ein Auftragsformular können Bilddaten in Form von
+                          PDF-Dateien hochgeladen werden.
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col s12 m6">
+                    <div class="card z-depth-0">
+                      <div class="card-content">
+                        <span class="card-title">
+                          <i class="material-icons blue-grey-text text-darken-2 left">layers</i>
+                          Optische Zeichenerkennung
+                        </span>
+                        <p>
+                          Die optische Zeichenerkennung erfolgt in der
+                          Recheninfrastruktur der Plattform.
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col s12 m6">
+                    <div class="card z-depth-0">
+                      <div class="card-content">
+                        <span class="card-title">
+                          <i class="material-icons blue-grey-text text-darken-2 left">layers</i>
+                          Fehlerkorrektur
+                        </span>
+                        <p>
+                          Je nach Qualität der Eingabedaten kann es zu
+                          Fehlern kommen, die korrigiert werden sollten.
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col s12 m6">
+                    <div class="card z-depth-0">
+                      <div class="card-content">
+                        <span class="card-title">
+                          <i class="material-icons blue-grey-text text-darken-2 left">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>
+                    </div>
+                  </div>
+                </div>
+                <p>
+                  Die Ausgabe dieses Dienstes erfolgt in Form von Textdateien,
+                  PDF Dateien mit hinterlegtem Text und <a href="https://tei-c.org/guidelines/p5/" target="_blank">TEI P5</a>
+                  konformen XML Dateien.
+                </p>
+              </div>
+            </div>
+          </div>
+          <div class="col s12 m4">
+            <div class="card">
+              <div class="card-content">
+                <span class="card-title">Auftrag erstellen</span>
+                <p>
+                  <i class="material-icons medium blue-grey-text text-darken-2 left">playlist_add</i>
+                  Auftragsformular zur Texterkennung von PDF-Dateien.
+                </p>
+              </div>
+              <div class="card-action right-align">
+                <a href="#create_job" class="waves-effect waves-light btn modal-trigger">Erstellen</a>
+              </div>
+            </div>
+
+            <div class="card">
+              <div class="card-content">
+                <span class="card-title">Auftragsübersicht</span>
+                <p>
+                  <i class="material-icons medium blue-grey-text text-darken-2 left">work</i>
+                  Hier wird der aktuelle Status sämtlicher vom Benutzer erstellten
+                  Aufträge aufgelistet.
+                </p>
+              </div>
+              <div class="card-action right-align">
+                <a href="job_manager.html" class="waves-effect waves-light btn">Öffnen</a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div id="create_job" class="modal overflow-visible">
+        <div class="modal-content">
+          <h4 style="line-height: 60px;"><i class="material-icons medium blue-grey-text text-darken-2 left">playlist_add</i>Texterkennung</h4>
+          <p>
+            Um den Auftrag erstellen zu können, müssen alle Formularfelder
+            ausgefüllt werden. Nachdem der Auftrag abgeschickt wurde, erhalten
+            Sie fortlaufende Benachrichtigungen über den aktuellen Bearbeitungsstand.
+            Nach erfolgreicher Bearbeitung stehen die Ergebnisse in
+            der <a href="job_manager.html">Auftragsübersicht</a> zum Download
+            zur Verfügung.
+          </p>
+          <form id="job_form" class="row">
+            <div class="input-field col s12">
+              <input placeholder="Mein Auftragsname" id="job_form_name" type="text" class="validate">
+              <label for="job_form_name">Auftragsname</label>
+            </div>
+            <div class="file-field input-field col s12 m6">
+              <div class="btn">
+                <span>Datei</span>
+                <input id="job_form_file" type="file" accept="application/pdf">
+              </div>
+              <div class="file-path-wrapper">
+                <input class="file-path validate" type="text">
+              </div>
+            </div>
+            <div class="input-field col s12 m6">
+              <select id="job_form_language">
+                <option value="" disabled selected>Option auswählen</option>
+                <option value="deu">Deutsch</option>
+                <option value="deu_frak">Deutsch (Fraktur)</option>
+                <option value="eng">Englisch</option>
+                <option value="fra">Französisch</option>
+                <option value="por">Portugisisch</option>
+                <option value="spa">Spanisch</option>
+              </select>
+              <label>Sprache der Eingabedatei</label>
+            </div>
+            <div class="input-field col s12 m6 hide">
+              <select id="job_form_service">
+                <option value="ocr" selected></option>
+              </select>
+            </div>
+          </form>
+        </div>
+        <div class="modal-footer">
+          <a href="#!" class="modal-close waves-effect waves-green btn-flat">Abbrechen</a>
+          <a href="javascript:jobFormSubmitHandler();" id="job_form_submit" class="modal-close waves-effect waves-green btn disabled">Abschicken</a>
+        </div>
+      </div>
+    </main>
+
+    <footer class="page-footer blue-grey darken-2">
+      <div class="container">
+        <div class="row">
+          <div class="col s12">
+            <p class="grey-text text-lighten-4 left">
+              <a href="https://www.uni-bielefeld.de/">
+                <img src="images/universitaet_bielefeld.png" alt="Logo: Universität Bielefeld" style="height: 72.5px">
+              </a>
+            </p>
+            <p class="grey-text text-lighten-4 right">
+              Gefördert durch die<br>
+              <a href="https://www.dfg.de/">
+                <img src="images/dfg.png" alt="Logo: Deutsche Forschungsgemeinschaft" style="height: 50px;">
+              </a>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer-copyright">
+        <div class="container">
+          © 2019 Copyright
+          <a class="grey-text text-lighten-4" href="https://www.uni-bielefeld.de/sfb1288">Universität Bielefeld | SFB 1288</a>
+          <a class="grey-text text-lighten-4 right" href="impressum.html">Impressum</a>
+        </div>
+      </div>
+    </footer>
+    <script src="js/materialize.min.js"></script>
+    <script>
+      M.AutoInit();
+    </script>
+    <script src="js/job_form_handler.js"></script>
+  </body>
+</html>
@@ -0,0 +1,233 @@
+<!DOCTYPE html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8">
+    <title>Opaque | Portal</title>
+    <link href="/vre/images/sfb_1288.png" rel="icon" type="image/png">
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <link rel="stylesheet" href="css/materialize.min.css">
+    <link rel="stylesheet" href="css/style.css">
+    <script src="js/vre_manager_rest.js"></script>
+    <script src="js/vre.js"></script>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  </head>
+  <body class="blue-grey lighten-5">
+    <header>
+      <ul id="main-nav-account-dropdown" class="dropdown-content">
+        <li>
+          <a href="account.html">Benutzerverwaltung</a>
+        </li>
+        <li class="divider"></li>
+        <li>
+          <a href="javascript:logout();">Abmelden</a>
+        </li>
+      </ul>
+      <nav class="blue-grey darken-2">
+        <div class="container">
+          <div class="nav-wrapper">
+            <a href="portal.html" class="brand-logo">
+              <i class="material-icons hide-on-small-only">cloud</i>
+              Opaque
+            </a>
+            <a href="#" data-target="main-nav-mobile" class="sidenav-trigger">
+              <i class="material-icons">menu</i>
+            </a>
+            <ul id="main-nav" class="right hide-on-med-and-down">
+              <li>
+                <a href="job_manager.html">
+                  <i class="material-icons left">work</i>
+                  Auftragsübersicht
+                </a>
+              </li>
+              <li>
+                <a href="nlp.html">
+                  <i class="material-icons left">format_textdirection_l_to_r</i>
+                  Linguistische Datenverarbeitung
+                </a>
+              </li>
+              <li>
+                <a href="ocr.html">
+                  <i class="material-icons left">find_in_page</i>
+                  Texterkennung
+                </a>
+              </li>
+              <li>
+                <a id="main-nav-account" class="dropdown-trigger" href="#!" data-target="main-nav-account-dropdown">
+                  <i class="material-icons left">account_circle</i>
+                  Benutzer
+                  <i class="material-icons right">arrow_drop_down</i>
+                </a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </nav>
+      <ul class="sidenav" id="main-nav-mobile">
+      <li>
+        <a href="job_manager.html">
+          <i class="material-icons left">work</i>
+          Auftragsübersicht
+        </a>
+      </li>
+      <li>
+        <a href="nlp.html">
+          <i class="material-icons left">format_textdirection_l_to_r</i>
+          Linguistische Datenverarbeitung
+        </a>
+      </li>
+      <li>
+        <a href="ocr.html">
+          <i class="material-icons left">find_in_page</i>
+          Texterkennung
+        </a>
+      </li>
+      <li>
+        <a href="account.html">
+          <i class="material-icons">account_circle</i>
+          Benutzer
+        </a>
+      </li>
+      <li>
+        <a href="javascript:logout();">
+          <i class="material-icons">account_circle</i>
+          Abmelden
+        </a>
+      </li>
+    </ul>
+    </header>
+
+    <main>
+      <div class="container">
+        <div class="row">
+          <div class="col s12 m8">
+            <div class="card">
+              <div class="card-content">
+                <span class="card-title">Portal</span>
+                <p class="overflow-hidden">
+                  <i class="material-icons blue-grey-text text-darken-2 left" style="font-size: 135px;">cloud</i>
+                  Opaque ist eine freie Plattform zur Unterstützung
+                  textverarbeitender Prozesse. Sie soll es ermöglichen,
+                  komplexe Programme zur einfachen Nutzung bereitzustellen und
+                  bereits etablierte Textverarbeitungsroutinen ohne die Hürde langer
+                  Einarbeitungszeiten zugänglich zu machen. Alle Berechnungen
+                  werden dabei von den vom SFB 1288 zur Verfügung gestellten
+                  Servern ausgeführt. So können Aufträge bearbeitet werden, ohne
+                  dass der Computer des Benutzers eingeschaltet sein muss.
+                </p>
+
+                <p>&nbsp;</p>
+                <p>&nbsp;</p>
+                <div class="divider"></div>
+                <p>&nbsp;</p>
+                <p>&nbsp;</p>
+
+                <p class="overflow-hidden">
+                  <i class="material-icons blue-grey-text text-darken-2 left" style="font-size: 135px;">lock_open</i>
+                  Alle hier zur Verfügung gestellten Dienste wurden durch den
+                  Einsatz freier Software realisiert. Um den Ansprüchen modernen
+                  Forschungsdatenmanagements zu entsprechen, muss die
+                  Nachnutzbarkeit von Ergebnissen sichergestellt werden. Aus diesem Grund
+                  wird bewusst auf proprietäre Dateiformate verzichtet. Stattdessen werden nur
+                  standardisierte und offene Formate genutzt, die eine
+                  einfache Verbreitung und Weiterverarbeitung ermöglichen.
+                </p>
+
+                <p>&nbsp;</p>
+                <p>&nbsp;</p>
+                <div class="divider"></div>
+                <p>&nbsp;</p>
+                <p>&nbsp;</p>
+
+                <p class="overflow-hidden">
+                  <img src="images/sfb_1288.png" alt="Logo: SFB 1288" class="left" style="width: 135px; height: 135px; margin-right: 15px;">
+                  Diese Seite wurde vom Teilprojekt INF des Sonderforschungsbereich 1288
+                  vor dem Hintergrund der gesammelten Erfahrungen entwickelt, die in einem
+                  Pilotprojekt zur digitalen Verarbeitung von Textdaten im SFB gemacht wurden.<br>
+                  Für Fragen und Anregungen steht das TP INF gerne via E-Mail zur Verfügung:
+                  <br><a href="mailto:mailto:inf_sfb1288@lists.uni-bielefeld.de">inf_sfb1288@lists.uni-bielefeld.de</a>
+                </p>
+
+                <p>&nbsp;</p>
+              </div>
+            </div>
+          </div>
+
+          <div class="col s12 m4">
+            <div class="card">
+              <div class="card-content">
+                <span class="card-title">Linguistische Datenverarbeitung</span>
+                <p>
+                  <i class="material-icons medium blue-grey-text text-darken-2 left">format_textdirection_l_to_r</i>
+                  Mit Hilfe datenverarbeitender Methoden werden Textdaten mit
+                  weiteren Informationen angereichert.
+                </p>
+              </div>
+              <div class="card-action right-align">
+                <a href="nlp.html" class="waves-effect waves-light btn">Zum Dienst</a>
+              </div>
+            </div>
+
+            <div class="card">
+              <div class="card-content">
+                <span class="card-title">Texterkennung</span>
+                <p>
+                  <i class="material-icons medium blue-grey-text text-darken-2 left">find_in_page</i>
+                  Textdaten werden aus Scans oder Fotos zur anschließenden
+                  Weiterverarbeitung extrahiert.
+                </p>
+              </div>
+              <div class="card-action right-align">
+                <a href="ocr.html" class="waves-effect waves-light btn">Zum Dienst</a>
+              </div>
+            </div>
+
+            <div class="card">
+              <div class="card-content">
+                <span class="card-title">Auftragsübersicht</span>
+                <p>
+                  <i class="material-icons medium blue-grey-text text-darken-2 left">work</i>
+                  Hier wird der aktuelle Status sämtlicher vom Benutzer erstellten
+                  Aufträge aufgelistet.
+                </p>
+              </div>
+              <div class="card-action right-align">
+                <a href="job_manager.html" class="waves-effect waves-light btn">Öffnen</a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+
+    <footer class="page-footer blue-grey darken-2">
+      <div class="container">
+        <div class="row">
+          <div class="col s12">
+            <p class="grey-text text-lighten-4 left">
+              <a href="https://www.uni-bielefeld.de/">
+                <img src="images/universitaet_bielefeld.png" alt="Logo: Universität Bielefeld" style="height: 72.5px">
+              </a>
+            </p>
+            <p class="grey-text text-lighten-4 right">
+              Gefördert durch die<br>
+              <a href="https://www.dfg.de/">
+                <img src="images/dfg.png" alt="Logo: Deutsche Forschungsgemeinschaft" style="height: 50px;">
+              </a>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer-copyright">
+        <div class="container">
+          © 2019 Copyright
+          <a class="grey-text text-lighten-4" href="https://www.uni-bielefeld.de/sfb1288">Universität Bielefeld | SFB 1288</a>
+          <a class="grey-text text-lighten-4 right" href="impressum.html">Impressum</a>
+        </div>
+      </div>
+    </footer>
+    <script src="js/materialize.min.js"></script>
+    <script>
+      M.AutoInit();
+    </script>
+  </body>
+</html>
				`@@ -0,0 +1 @@`
				<mxfile modified="2019-02-21T10:15:24.039Z" host="www.draw.io" agent="Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:65.0) Gecko/20100101 Firefox/65.0" etag="5nBsW4ZSyWNaf1kxtOQV" version="10.2.5" type="device"><diagram id="ulq2d8L5X5YhzO1EcT_f" name="Page-1">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 truncated