Change poster page

app/templates/main/poster.html.j2

 {% extends "nopaque.html.j2" %}
 
-{% set full_width = True %}
+{% set full_width = False %}
 {% set roadmap = False %}
 
 {% block page_content %}
-<div class="col s3">
-  <div class="card">
-    <div class="card-content">
-      <span class="card-title">Eingabe</span>
-      <p>Textdaten in Form von Bildern, Fotos, Scans&hellip;</p>
-    </div>
-  </div>
-</div>
-
-<div class="col s6">
+<style>
+  input::placeholder {
+    color: black;
+    font-style: italic;
+  }
+</style>
+
+<div class="col s9">
   <div class="card">
     <div class="card-content">
       <span class="card-title"><i class="material-icons left">burst_mode</i>Setup files</span>
@@ -23,6 +21,23 @@
         vorsieht, wird dieser Dienst zur Verfügung gestellt, um etwaig
         anfallende Konvertierungsprozesse durchzuführen.
       </p>
+      <div class="row">
+        <div class="col s9">
+          <div class="file-field input-field">
+            <div class="btn">
+              <span>File</span>
+              <input type="file" multiple>
+            </div>
+            <div class="file-path-wrapper">
+              <input class="file-path validate" type="text" placeholder="Bilder, Fotos, Scans&hellip;">
+            </div>
+          </div>
+        </div>
+        <div class="col s3 right-align">
+          <p>&nbsp;</p>
+          <button class="btn waves-effect waves-light"type="submit">Submit<i class="material-icons right">send</i></button>
+        </div>
+      </div>
       <blockquote>Umgesetzt mit <i>ImageMagick</i></blockquote>
     </div>
   </div>
@@ -39,24 +54,32 @@
 
 <div class="col s12"></div>
 
-<div class="col s3">
-  <div class="card">
-    <div class="card-content">
-      <span class="card-title">Eingabe</span>
-      <p>Textdaten in Form von Multipage-TIFF- oder PDF-Dateien.</p>
-    </div>
-  </div>
-</div>
-
-<div class="col s6">
+<div class="col s9">
   <div class="card">
     <div class="card-content">
       <span class="card-title"><i class="material-icons left">find_in_page</i>Optical Character Recognition</span>
       <p>
-        Durch optische Analysemethoden mit werden aus Bilddaten, wie Fotos
-        oder Scans, Textdaten erzeugt. Erst dieser Vorverarbeitungsschritt
+        Durch optische Analysemethoden werden aus Bilddaten, wie Fotos oder
+        Scans, Textdaten erzeugt. Erst dieser Vorverarbeitungsschritt
         ermöglicht eine weitere computergestützte Verarbeitung von Dokumenten.
       </p>
+      <div class="row">
+        <div class="col s9">
+          <div class="file-field input-field">
+            <div class="btn">
+              <span>File</span>
+              <input type="file" multiple>
+            </div>
+            <div class="file-path-wrapper">
+              <input class="file-path validate" type="text" placeholder="Multipage-TIFF- oder PDF-Dateien">
+            </div>
+          </div>
+        </div>
+        <div class="col s3 right-align">
+          <p>&nbsp;</p>
+          <button class="btn waves-effect waves-light"type="submit">Submit<i class="material-icons right">send</i></button>
+        </div>
+      </div>
       <blockquote>Umgesetzt mit <i>Tesseract OCR</i></blockquote>
     </div>
   </div>
@@ -75,16 +98,7 @@
 
 <div class="col s12"></div>
 
-<div class="col s3">
-  <div class="card">
-    <div class="card-content">
-      <span class="card-title">Eingabe</span>
-      <p>Ausschließlich Textdateien.</p>
-    </div>
-  </div>
-</div>
-
-<div class="col s6">
+<div class="col s9">
   <div class="card">
     <div class="card-content">
       <span class="card-title"><i class="material-icons left">format_textdirection_l_to_r</i>Natural Language Processing</span>
@@ -94,6 +108,23 @@
         Part-of-speech-Tagging und Eigennamenerkennung) werden Textdateien
         mit weiteren Informationen angereichert.
       </p>
+      <div class="row">
+        <div class="col s9">
+          <div class="file-field input-field">
+            <div class="btn">
+              <span>File</span>
+              <input type="file" multiple>
+            </div>
+            <div class="file-path-wrapper">
+              <input class="file-path validate" type="text" placeholder="Textdateien">
+            </div>
+          </div>
+        </div>
+        <div class="col s3 right-align">
+          <p>&nbsp;</p>
+          <button class="btn waves-effect waves-light"type="submit">Submit<i class="material-icons right">send</i></button>
+        </div>
+      </div>
       <blockquote>Umgesetzt mit <i>spaCy</i></blockquote>
     </div>
   </div>
@@ -103,23 +134,14 @@
   <div class="card">
     <div class="card-content">
       <span class="card-title">Ausgabe</span>
-      <p>Korpus Dateien im <i>verticalized text</i>-Format (XML-Dialekt).</p>
+      <p>Korpusdateien im <i>verticalized text</i>-Format (XML-Dialekt).</p>
     </div>
   </div>
 </div>
 
 <div class="col s12"></div>
 
-<div class="col s3">
-  <div class="card">
-    <div class="card-content">
-      <span class="card-title">Eingabe</span>
-      <p>Korpus Dateien und Metadaten entsprechend des BibTeX-Schemas.</p>
-    </div>
-  </div>
-</div>
-
-<div class="col s6">
+<div class="col s9">
   <div class="card">
     <div class="card-content">
       <span class="card-title"><i class="material-icons left">search</i>Corpus Analysis</span>
@@ -129,6 +151,18 @@
         ausgeführt werden. Ergebnisse können als Text oder in abstrakter
         Darstellung ausgewertet werden.
       </p>
+      <div class="input-field">
+        <i class="material-icons prefix">search</i>
+        <input class="search" placeholder='"fox" "jumps" "over" []* "dog"' type="search"></input>
+      </div>
+      <p>
+        <i class="material-icons left">subdirectory_arrow_right</i>
+        <span class="chip">The</span> <span class="chip">quick</span>
+        <span class="chip">brown</span> <span class="chip">fox</span>
+        <span class="chip">jumps</span> <span class="chip">over</span>
+        <span class="chip">the</span> <span class="chip">lazy</span>
+        <span class="chip">dog</span> <span class="chip">.</span>
+      </p>
       <blockquote>Umgesetzt mit <i>IMS Open Corpus Workbench</i></blockquote>
     </div>
   </div>