Add mockup for GUI prototype

src/main/asciidoc/pflichtenheft.adoc

@@ -1087,48 +1087,39 @@ Das System muss
 
 == GUI Prototyp
 
-=== Überblick: Dialoglandkarte
-Erstellen Sie ein Übersichtsdiagramm, das das Zusammenspiel Ihrer Masken zur Laufzeit darstellt. Also mit welchen Aktionen zwischen den Masken navigiert wird.
-//Die nachfolgende Abbildung zeigt eine an die Pinnwand gezeichnete Dialoglandkarte. Ihre Karte sollte zusätzlich die Buttons/Funktionen darstellen, mit deren Hilfe Sie zwischen den Masken navigieren.
+Die folgenden Bilder sollen darstellen, wie die grafische Oberfläche aussehen soll, wobei das Design zweitranging, die Funktionalität priorisiert ist.
 
-=== Dialogbeschreibung
-Für jeden Dialog:
+[[home_image]]
+image::./models/mockups/startseite.svg[Startseite, 100%, 100%, pdfwidth=100%, title="Startseite", align=center]
+[small]_Buttons in der Navigationsleiste dienen dem Scrollen auf die unterhalb liegenden Bereiche. Von anderen Unterseiten aus wird die Startseite geöffnet_
 
-1. Kurze textuelle Dialogbeschreibung eingefügt: Was soll der jeweilige Dialog? Was kann man damit tun? Überblick?
-2. Maskenentwürfe (Screenshot, Mockup)
-3. Maskenelemente (Ein/Ausgabefelder, Aktionen wie Buttons, Listen, …)
-4. Evtl. Maskendetails, spezielle Widgets
+[[login_image]]
+image::./models/mockups/login.svg[Loginseite, 100%, 100%, pdfwidth=100%, title="Loginseite", align=center]
 
-=== Umsetzung
-Die folgenden Bilder sollen zeigen, wie die Software aussehen soll.
+[[register_image]]
+image::./models/mockups/registrierung.svg[Registrierungsseite, 100%, 100%, pdfwidth=100%, title="Registrierungsseite", align=center]
 
-[small]_(Bilder folgen später, vorerst nur Beschreibung)_
+[[produktseite_image]]
+image::./models/mockups/produktseite.svg[Produktseite, 100%, 100%, pdfwidth=100%, title="Produktseite", align=center]
 
-Software soll enthalten:
+[[warenkorb_image]]
+image::./models/mockups/warenkorb.svg[Warenkorb, 100%, 100%, pdfwidth=100%, title="Warenkorb", align=center]
+[small]_Der Warenkorb ist über das Profil erreichbar._
 
-- Login-Seite als Startseite
-- Navigationsbereich (Optionen erst sichtbar nach Login)
-* Terminverwaltung - in Kalenderform, editierbare Einträge
-* Kundenverwaltung - tabellarisch, Löschfunktion, Umbenennungsfunktion
-* Mitarbeiterverwaltung - tabellarisch, Löschfunktion, Umbenennungsfunktion, Rollenverwaltung
-* Lager - Produktname, Produktbild, Menge, Preis
-- Eventplanungsseite - evtl. Drop-down-Menüs für Eventtypauswahl und eventspezifische Eingabefelder
-- Kann: Produktseite - Produktname, Produktbeschreibung, Preis, Bilder
+[[administration_image]]
+image::./models/mockups/administration.svg[Administration, 100%, 100%, pdfwidth=100%, title="Administration", align=center]
 
+[[lagerverwaltung_image]]
+image::./models/mockups/lagerverwaltung.svg[Lagerverwaltung, 100%, 100%, pdfwidth=100%, title="Lagerverwaltung", align=center]
 
-[small]_Notiz: Überschüssige Zeit könnte in Design investiert werden._
+[[personalverwaltung_image]]
+image::./models/mockups/personalverwaltung.svg[Personalverwaltung, 100%, 100%, pdfwidth=100%, title="Personalverwaltung", align=center]
 
-=== Überblick: Dialoglandkarte
-Erstellen Sie ein Übersichtsdiagramm, das das Zusammenspiel Ihrer Masken zur Laufzeit darstellt. Also mit welchen Aktionen zwischen den Masken navigiert wird.
-//Die nachfolgende Abbildung zeigt eine an die Pinnwand gezeichnete Dialoglandkarte. Ihre Karte sollte zusätzlich die Buttons/Funktionen darstellen, mit deren Hilfe Sie zwischen den Masken navigieren.
+[[kundenverwaltung_image]]
+image::./models/mockups/kundenverwaltung.svg[Kundenverwaltung, 100%, 100%, pdfwidth=100%, title="Kundenverwaltung", align=center]
 
-=== Dialogbeschreibung
-Für jeden Dialog:
-
-1. Kurze textuelle Dialogbeschreibung eingefügt: Was soll der jeweilige Dialog? Was kann man damit tun? Überblick?
-2. Maskenentwürfe (Screenshot, Mockup)
-3. Maskenelemente (Ein/Ausgabefelder, Aktionen wie Buttons, Listen, …)
-4. Evtl. Maskendetails, spezielle Widgets
+[[terminkalender_image]]
+image::./models/mockups/terminkalender.svg[Terminkalender, 100%, 100%, pdfwidth=100%, title="Terminkalender", align=center]
 
 == Datenmodell