Added some requirements

4 files changed, 34 insertions, 12 deletions

diff --git a/assets/css/main.css b/assets/css/main.css
index 75b9464..0953736 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -32,6 +32,7 @@ pre {
     Navigation bar
  */
 .navbar {
+    position: fixed;
     width: 100vw;
     background: var(--grey);
     overflow: hidden;
@@ -66,6 +67,7 @@ pre {
     Content
  */
 .content {
+    margin-top: 30px;
     padding: 20px;
 }
 
diff --git a/generator.html b/generator.html
index f172e8b..0f4ce92 100644
--- a/generator.html
+++ b/generator.html
@@ -20,9 +20,6 @@
 
 <div class="content">
     <p class="heading">KV-Diagramm Generator</p>
-    <p>UND == &</p>
-    <p>ODER == #</p>
-    <p>NICHT == !</p>
     <p>
         Es dürfen <u>NUR</u> die Variablen a, b, c und d und die Abel Schreibweise verwendet werden.
     </p>
@@ -30,9 +27,6 @@
         Wahre Werte werden zur Veranschaulichung grün hinterlegt und in Abhängigkeit der
         umliegenden Werte (Matrix Neighbours) heller bzw. dunkler.
     </p>
-    <p>
-        Mehr Informationen zur Kalkulation sind in <b>F12->Konsole</b> aufrufbar.
-    </p>
     <label for="input"><b>Boolescher Funktionsterm:</b></label>
     <input id="input" placeholder="z.B. (a & b) # (c & d)" type="text">
     <br>
@@ -76,12 +70,26 @@
         <div class="grid-child">!c</div>
         <div class="grid-child"></div>
     </div>
+
+    <p><b>Hinweise:</b></p>
+    <ul>
+        <li>
+            Die farbliche Gradierung soll vor allem dem Ablesen und dem Zusammenfassen der Felder
+            helfen, da das Skript hier quasi versucht, Felder zu finden (auch wenn das nicht perfekt
+            gelingt).
+        </li>
+        <li>
+            Mehr Informationen zur Kalkulation sind in <b>F12->Konsole</b> aufrufbar.
+        </li>
+    </ul>
 </div>
 
 <footer>
     <hr>
     Erstellt von <a href="https://marvinborner.de" target="_blank">Marvin Borner</a> TGI 11.1 RBS
     Ulm
+    <br>
+    Bei Fragen bitte <a href="mailto:contact@marvinborner.de">hier</a> melden.
 </footer>
 
 <script src="assets/js/generator.js"></script>
diff --git a/overview.html b/overview.html
index 5a5ec05..057702f 100644
--- a/overview.html
+++ b/overview.html
@@ -37,13 +37,25 @@
         an den Rändern mit den Variablen beschriftet, wobei jede Variable in negierter- und
         nicht-negierter Form vorkommt.
     </p>
-    <p>
-        Ein möglicher Aufbau könnte zum Beispiel so aussehen:
-    </p>
 
+    <p>Ein möglicher Aufbau kann zum Beispiel so aussehen:</p>
     <figure>
         <img alt="KV-Diagramm mit mehreren Eingängen" src="assets/img/kv_multiple.png">
-        <figcaption><i>KV-Diagramm mit mehreren Eingängen</i></figcaption>
+        <figcaption><i>Normales KV-Diagramm mit vier Eingängen</i></figcaption>
+    </figure>
+
+    <p>
+        Oft wird auch eine Torus-Form verwendet. Diese hat den Vorteil, dass das Zusammenfassen an
+        den Kanten/Ecken einfacher verläuft:
+    </p>
+    <figure>
+        <img alt="KV-Diagramm wird 'zusammengerollt'" src="assets/img/kv_donut_animation.gif">
+        <figcaption><i>KV-Diagramm wird "zusammengerollt"</i></figcaption>
+    </figure>
+    <br>
+    <figure>
+        <img alt="KV-Diagramm in Torus-Form" src="assets/img/kv_donut.gif">
+        <figcaption><i>KV-Diagramm in Torus-Form</i></figcaption>
     </figure>
 
     <a href="process.html">> Weiter zum Ablauf der Minimierung</a>
diff --git a/process.html b/process.html
index 7b0135b..82b7c73 100644
--- a/process.html
+++ b/process.html
@@ -29,7 +29,7 @@
     <p><u>Beispielsablauf</u>:</p>
     <ol>
         <li>
-            <p>Wahrheitstabelle:</p>
+            <p>Wahrheitstabelle: <a href="#dnf">> Weiter</a></p>
             <table>
                 <thead>
                 <tr>
@@ -176,7 +176,7 @@
         </li>
 
         <li>
-            <p>Disjunktive Normalform ablesen (zum vergleichen):</p>
+            <p id="dnf">Disjunktive Normalform ablesen (zum vergleichen):</p>
             <p>
                 Z =
                 (<span class="not">E<sub>1</sub></span>&and;E<sub>2</sub>&and;<span