Created a documentation for the instructions

docs/instructions/main.md

@@ -0,0 +1,37 @@
+# Die Startseite
+
+Die Oberfläche von MySpeed ist vom Grund auf so konzipiert, dass sie einfach zu bedienen ist. Um mögliche Verwirrungen
+jedoch zu vermeiden, wird alles hier noch einmal erklärt.
+
+## Die Oberfläche
+
+![MySpeed Oberfläche](/assets/images/myspeed_interface.png){: align="left" }
+
+Die Oberfläche von MySpeed ist in **3** Teile unterteilt.
+
+Der **erste** Teil ist der sogenannte Header und enthält einen direkten Zugriff auf die Einstellungen und das Starten
+eines Speedtests. Auf die Einstellungen wird [hier](../settings) genauer eingegangen.
+
+Im **zweiten** Teil wird immer der aktuellste Speedtest angezeigt.
+
+Der **dritte** Teil zeigt alle Speedtests der letzten 24 Stunden an.
+
+<br clear="both" />
+
+## Letzter Test
+
+![Letzter Test](/assets/images/latest_test.png){align="left"}
+
+Dieses Teil zeigt immer den aktuellsten, also zuletzt erstellten Speedtest an. Klickt man auf ein Icon, öffnet sich
+das jeweilige Hilfe-Menü mit mehr Infos
+
+<br clear="both" />
+
+## Übersicht aller Tests
+
+![Letzter Test](/assets/images/all_tests.png){align="left"}
+
+Hier lassen sich alle Tests anzeigen, die in den letzten 24 Stunden erstellt wurden. Auch hier kann man wieder auf das
+Ping, Down und Upload-Icon klicken, um ein Hilfe-Menü zu öffnen. Es lässt sich allerdings jetzt auch auf die Uhr links
+klicken, um einen Dialog mit weiteren Informationen zu öffnen. Dieser Dialog zeigt nun weitere Infos über den Test und
+bietet sogar die Möglichkeit, ihn direkt zu löschen (falls nötig).