From 644d91d296d1c55faac1e0aa47acf2142837647f Mon Sep 17 00:00:00 2001
From: ulrich <ulrich@zbox>
Date: Sun, 24 Jan 2021 17:04:27 +0000
Subject: [PATCH] Hilfe-Link angepasst und Hilfe aktualisiert
---
web/META-INF/daten/www/dok/wbx/bilder/wbx-firefox.png | 0
web/META-INF/daten/www/dok/wbx/einrichtung.html | 737 ++++++++++++++++++++++
web/META-INF/daten/www/dok/wbx/asciidoctor.css | 427 ++++++++++++
web/META-INF/daten/www/dok/wbx/bilder/File-Server-icon.png | 0
web/META-INF/daten/www/dok/wbx/bilder/dateiverwaltung.png | 0
web/META-INF/daten/www/dok/wbx/bilder/dokeditor.png | 0
web/META-INF/daten/www/dok/wbx/bilder/wbx-4.png | 0
/dev/null | 302 ---------
web/META-INF/daten/www/dok/wbx/bilder/texteditor.png | 0
web/META-INF/daten/www/dok/wbx/bilder/speichern-unter.png | 0
web/ui2/js/app.js | 2
web/META-INF/daten/www/dok/wbx/bedienung.html | 496 +++++++++++++++
web/META-INF/daten/www/dok/wbx/bilder/wbx-3.png | 0
13 files changed, 1,661 insertions(+), 303 deletions(-)
diff --git a/web/META-INF/daten/www/dok/wbx/App.htmi b/web/META-INF/daten/www/dok/wbx/App.htmi
deleted file mode 100644
index 2f7915e..0000000
--- a/web/META-INF/daten/www/dok/wbx/App.htmi
+++ /dev/null
@@ -1,25 +0,0 @@
-<h1>Apps</h1>
-<p>Dieses Dokument beschreibt Programme, die von der <a href="http://uhilger.de/dev/Software/WebBox/WebBox">WebBox</a> ausgeführt werden können, die Apps. Das ist interessant, wenn man selbst Apps erstellen möchte. Anwender, die fertige Apps auf einer WebBox nutzen möchten, müssen hier nicht weiterlesen.</p>
-<p>Apps müssen gemäß der <a href="http://www.oracle.com/technetwork/java/javaee/tech/index.html">Java Servlet Spezifikation</a> aufgebaut sein, damit sie von der WebBox ausgeführt werden können. In diesem Dokument wird nicht der gesamte Standard der Java Servlet Spezifikation beschrieben. Es werden hier nur Teile erwähnt, die als Minimalansatz für eine App dienen können.</p>
-<p style="padding-left: 30px;"><a href="#run">Laufzeitumgebung und -voraussetzungen</a><br /><a href="#strukt">Aufbau einer App</a></p>
-<p style="padding-left: 60px;"><a href="#app-folder">App-Ordner</a><br /><a href="#web-inf-folder">Der Ordner WEB-INF</a><br /><a href="#webxml">Deployment Descriptor</a></p>
-<h2><a name="run"></a>Laufzeitumgebung und -voraussetzungen</h2>
-<p>Apps laufen auf der Maschine, auf der die WebBox gestartet wurde. Sie werden von der WebBox als Teil des Prozesses ausgeführt, in dem die WebBox läuft.</p>
-<p>Prizipiell kann jede App, die die Java Servlet Spezifikation implementiert, auf der WebBox laufen. Einzelheiten zu besonderen Laufzeitvoraussetzungen müssen der Dokumentation der betreffenden App entnommen werden.</p>
-<p>Die nachfolgenden Abschnitte beschreiben Aspekte einer App, die mindestens gegeben sein müssen. Diese werden in aller Regel von Apps erfüllt, die der Java Servlet Spezifikation entsprechen. Die Angaben an dieser Stelle richten sich an Nutzer, die selbst Apps für die WebBox herstellen möchten.</p>
-<h2><a name="strukt"></a>Aufbau einer App</h2>
-<p>Eine App ist eine Sammlung aus Dateien in einem Ordner des Dateisystems, dem App-Ordner. Apps müssen wie folgt aufgebaut sein:</p>
-<p style="padding-left: 30px;"><code>/App-Ordner</code><br /><code> /WEB-INF</code><br /><code> web.xml</code><br /><code> /classes</code><br /><code> /lib</code></p>
-<p>Der Hersteller einer App kann frei entscheiden, wie Struktur und Inhalt innerhalb dieses Rahmens beschaffen ist. NAchfolgend sind relevante Teile der obigen Struktur beschrieben.</p>
-<h3><a name="app-folder"></a>App-Ordner</h3>
-<p>Der App-Ordner enthält alle Bestandteile der App, z.B. Webseiten, Konfigurationsdateien, als Programm ausführbare Teile. Was sich nicht im Ordner <code>WEB-INF</code> befindet liefert die WebBox zur Laufzeit der App als Inhalt aus. Liegt im App-Verzeichnis z.B. eine HTML-Datei, wird diese als Webseite ausgeliefert. Ebenso werden Bilddateien ausgegeben.</p>
-<p>Die so im App-Ordner vorgefundenen Inhalte erhalten von der WebBox jeweils ihren eigenen Uniform Resource Locator (URL) unter dem sie zugänglich sind. Den URL bildet die WebBox aus dem Ablageort des Inhalts innerhalb des App-Ordners und seinem Dateinamen. Dabei wird der Name des App-Ordners ebenfalls Teil des URL. Befindet sich beispielsweise eine Datei namens <code>Infos.html</code> im Ordner <code>/App-Ordner/meine</code> wird der Inhalt über die WebBox über folgenden URL zugänglich</p>
-<p style="padding-left: 30px;"><code>http://localhost:8098/App-Ordner/meine/Infos.html</code></p>
-<p>Aus diesem Schema ergibt sich, dass der Name eines App-Ordners nur einmal verwendet werden kann. Er dient der WebBox als eindeutige Zuordnung.</p>
-<h3><a name="web-inf-folder"></a>Der Ordner WEB-INF</h3>
-<p>Im Ordner <code>/App-Ordner/WEB-INF</code> werden Java-Klassen, Java-Klassenbibliotheken und Konfigurationsdateien abgelegt. Diese werden von der WebBox dynamisch geladen und ausgeführt wie vom Hersteller der App programmiert.</p>
-<h3><a name="webxml"></a>Deployment Descriptor</h3>
-<p>Als Deployment Descriptor wird die Datei <code>web.xml</code> bezeichnet. Der Deployment Descriptor beschreibt die App in einer standardisierten Weise und muss im Ordner <code>/App-Ordner/WEB-INF</code> abgelegt sein. Die WebBox zieht den Inhalt des Deployment Descriptors heran, um die ausführbaren Teile einer App zu erkennen und so auszuführen, wie es konfiguriert wurde. Die Beschreibung des Aufbaus eines Deployment Descriptors findet sich in der <a href="http://www.oracle.com/technetwork/java/javaee/tech/index.html">Java Servlet Spezifikation</a>.</p>
-<p> </p>
-<p> </p>
-<p> </p>
\ No newline at end of file
diff --git a/web/META-INF/daten/www/dok/wbx/Bedienung.htmi b/web/META-INF/daten/www/dok/wbx/Bedienung.htmi
deleted file mode 100644
index 811cbcd..0000000
--- a/web/META-INF/daten/www/dok/wbx/Bedienung.htmi
+++ /dev/null
@@ -1,172 +0,0 @@
-<h1>Bedienung</h1>
-<p>Hier ist die Bedienung der <a href="http://uhilger.de/dev/Software/WebBox/WebBox">WebBox</a> beschrieben.</p>
-<p style="padding-left: 30px;"><a href="#aufruf">WebBox aufrufen</a><br /><a href="#perspub">Persönliche und öffentliche Inhalte</a><br /><a href="#edittext">Dateien erstellen und ändern</a><br /><a href="#dokedit">Textdokumente erstellen und bearbeiten</a><br /><a href="#bearb">Ordner anlegen, Inhalte verschieben, kopieren, löschen</a><br /><a href="#view">Inhalte ansehen</a><br /><a href="#upload">Inhalte zur WebBox übertragen</a><br /><a href="#bilder">Bilder verwenden</a><br /><a href="#mng-user">Benutzer verwalten</a><br /><a href="#mng-apps">Apps verwalten</a><br /><a href="#mng-db">Datenbanken verwalten</a></p>
-<p> </p>
-<h2><a name="aufruf"></a>WebBox aufrufen</h2>
-<p>Nach <a href="Installation.htmi">Installation</a> und Start ist die WebBox mit einem Browser bedienbar. Wird der Uniform Resource Locator (URL)</p>
-<p style="padding-left: 30px;"><code>http://localhost:8098</code> (unverschlüsselt) oder</p>
-<p style="padding-left: 30px;"><code>https://localhost:8442</code> (verschlüsselt) </p>
-<p>im Browser aufgerufen, erscheint unter diesen Adressen jeweils die Hauptseite der WebBox.</p>
-<p style="padding-left: 30px;"><a href="Bilder/startseite.png" data-lightbox="startseite"> <img style="margin: 5px 10px; border: 1px solid black;" src="Bilder/startseite_tn.png" alt="foto" width="120" height="80" /></a></p>
-<p style="padding-left: 30px;"><em>Die Hauptseite der WebBox</em> <br /><span style="font-size: x-small;">(für eine größere Ansicht das Bild anklicken)</span></p>
-<h2><a name="perspub"></a>Persönliche und öffentliche Inhalte</h2>
-<p>Die WebBox unterscheidet für jeden Benutzer einen öffentlichen und einen nicht öffentlichen Bereich. Im öffentlichen Bereich befindliche Inhalte sind ohne Einschränkung sichtbar. Inhalte im persönlichen Bereich sind nur für den angemeldeten Benutzer sichtbar. Jeder angemeldete Benutzer sieht dabei im persönlichen Bereich nur seine eigenen Inhalte. Beide Bereiche sind mit einem eigenen Uniform Resource Locator (URL) zugänglich:</p>
-<p style="padding-left: 30px;"><code>https://localhost:8442/home/[benutzername]/</code> (persönliche Inhalte)</p>
-<p style="padding-left: 30px;"><code>https://localhost:8442/data/[benutzername]/</code> (öffentliche Inhalte)</p>
-<p>Die URLs für persönliche und öffentliche Inhalte wie sie oben beschrieben sind geben dabei Inhalte aus den Ordnern <code>Persoenlich</code> und <code>Oeffentlich</code> wieder. Deren Inhalt wird erstellt und verwaltet wie in den folgenden Kapiteln beschrieben.</p>
-<h2><a name="edittext"></a>Dateien erstellen und ändern</h2>
-<p>Die WebBox ist mit einer Dateiverwaltung ausgestattet, mit der <a href="https://de.wikipedia.org/wiki/Datei">Dateien</a> erstellt und deren Inhalte bearbeitet werden können. Die Dateiverwaltung der WebBox wird mit der Schaltfläche <code>Dateien</code> auf der Hauptseite aufgerufen. </p>
-<p style="padding-left: 30px;"><a href="Bilder/verwaltung.png" data-lightbox="verwaltung"> <img style="margin: 5px 10px; border: 1px solid black;" src="Bilder/verwaltung_tn.png" alt="foto" width="120" height="50" /></a></p>
-<p style="padding-left: 30px;"><em>Die Schaltfläche 'Dateien'</em> <br /> <span style="font-size: x-small;">(für eine größere Ansicht das Bild anklicken)</span></p>
-<p>Mit Betätigen der Schaltfläche <code>Dateien</code> erscheint zunächst die Anmeldeseite und mit erfolgreicher <a href="#mng-user">Anmeldung</a> die Dateiverwaltung</p>
-<p style="padding-left: 30px;"><a href="Bilder/dateiverwaltung.png" data-lightbox="dateiverwaltung"> <img style="margin: 5px 10px; border: 1px solid black;" src="Bilder/dateiverwaltung_tn.png" alt="foto" width="120" height="70" /> </a></p>
-<p style="padding-left: 30px;"><em>Die Dateiverwaltung der WebBox</em> <br /> <span style="font-size: x-small;">(für eine größere Ansicht das Bild anklicken)</span></p>
-<p>Mit Klick auf den Ordner <code>Persoenlich</code> wird dessen Inhalt angezeigt, anfangs ist dieser leer. Auswahl des Punkts <code>Neuer Text...</code> im Menü <code>Datei</code> öffnet den Texteditor.</p>
-<p style="padding-left: 30px;"><a href="Bilder/texteditor.png" data-lightbox="texteditor"> <img style="margin: 5px 10px; border: 1px solid black;" src="Bilder/texteditor_tn.png" alt="foto" width="120" height="80" /> </a></p>
-<p style="padding-left: 30px;"><em>Der Texteditor der WebBox</em> <br /> <span style="font-size: x-small;">(für eine größere Ansicht das Bild anklicken)</span></p>
-<p>Hier kann nun beliebiger Textinhalt eingetragen werden. Auswahl des Punkts <code>Speichern</code> oder <code>Speichern unter..</code> im Menü <code>Datei</code> fragt einen Namen für die neue Datei ab.</p>
-<p style="padding-left: 30px;"><a href="Bilder/speichern-unter.png" data-lightbox="speichern-unter"> <img style="margin: 5px 10px; border: 1px solid black;" src="Bilder/speichern-unter_tn.png" alt="foto" width="120" height="60" /> </a></p>
-<p style="padding-left: 30px;"><em>Dialog Datei speichern</em> <br /> <span style="font-size: x-small;">(für eine größere Ansicht das Bild anklicken)</span></p>
-<p>Mit Betätigen der Schaltfläche <code>Speichern</code> wird die neue Textdatei unter dem eingetragenen Namen in dem Ordner gespeichert, von dem aus der Texteditor gestartet wurde, in diesem Fall also im Ordner <code>Persoenlich</code>. Die Auswahl <code>Schließen</code> aus dem Menü <code>Datei</code> schließt den Texteditor und es wird wieder der Inhalt des Ordners <code>Persoenlich</code> angezeigt. Dort ist jetzt die neu angelegte Datei dargestellt.</p>
-<p>Zum Bearbeiten einer Textdatei wählt man <code>Als Text öffnen</code> aus dem Menü <code>Datei</code>.</p>
-<h2><a name="dokedit"></a>Textdokumente erstellen und bearbeiten</h2>
-<p>Mit der Dateiverwaltung lassen sich auch Textdokumente schreiben und bearbeiten. Die Vorgehensweise ist genauso wie im vorigen Abschnitt für Textdateien beschrieben. Für Textdokumente wird <code>Neues Dokument</code> aus dem Menü <code>Datei </code>gewählt woraufhin sich der Dokumenteditor der Dateiverwaltung öffnet.</p>
-<p style="padding-left: 30px;"><a href="Bilder/dokeditor.png" data-lightbox="dokeditor"> <img style="margin: 5px 10px; border: 1px solid black;" src="Bilder/dokeditor_tn.png" alt="foto" width="120" height="90" /> </a></p>
-<p style="padding-left: 30px;"><em>Der Dokumenteditor der WebBox</em> <br /> <span style="font-size: x-small;">(für eine größere Ansicht das Bild anklicken)</span></p>
-<p>Hier kann ein Textdokument mit Formatierungen direkt im Browser erstellt und bearbeitet werden, wie man es von üblichen Textverarbeitungen gewohnt ist. Das Speichern oder bearbeiten erfolgt wie im vorigen Abschnitt beschrieben. Textdokumente werden dabei als reines HTML gespeichert, der Autor benötigt keine HTML-Kenntnisse für das Schreiben oder Bearbeiten. Die Dokumente sind so bestens für die Verwendung im Netz geeignet.</p>
-<h2><a name="bearb"></a>Ordner anlegen, Inhalte verschieben, kopieren, löschen</h2>
-<p>Mit den Punkt <code>Neuer Ordner</code> im Menü <code>Datei</code> kann im gerade angezeigten Ordner ein neuer Ordner erstellt werden. Nach Eingabe eines Namens für den neuen Ordner wird der neue Ordner im aktuell geöffneten Ordner angelegt. Ordner und deren Inhalte können mit den Optionen im Menü <code>Bearbeiten</code> verschoben, kopiert oder gelöscht werden. Hierzu werden folgende Schritte ausgeführt</p>
-<ol>
-<li>Inhalt auswählen, der bearbeitet werden soll,</li>
-<li>Menü <code>Bearbeiten</code> -> <code>Kopieren</code> oder <code>Ausschneiden</code> wählen,<code></code></li>
-<li>Ordner öffnen, in den die ausgewählten Inhalte verschoben oder kopiert werden sollen und</li>
-<li><code>Menü <code>Bearbeiten</code> -> Einfügen</code> wählen.</li>
-</ol>
-<p>Die gewählten Inhalte werden kopiert bzw. verschoben und befinden sich anschließend am gewählten Ort.</p>
-<h2><a name="view"></a>Inhalte ansehen</h2>
-<p>Über den Punkt <code>Ansehen</code> im Menü <code>Datei</code> wird der Inhalt der gewählten Datei im Browser angezeigt. Auf diese Weise lässt sich auch der URL bestimmen, unter dem die Datei im Browser aufgerufen werden kann. Freilich werden so nur Inhalte dargestellt, die im Browser angesehen werden können. Dateien mit nicht darstellbaren Formaten werden heruntergeladen.</p>
-<h3>Textdokumente und HTML-Seiten</h3>
-<p>Ein Textdokument wie es mit der WebBox erstellt werden kann ist einer HTML-Seite ähnlich, insbesondere, da sein Inhalt als HTML gespeichert wird. Es beinhaltet den Teil einer HTML-Seite, der in einer HTML-Seite im Element <code>body</code> untergebracht ist. Zu vollwertigen HTML-Seiten fehlt den Textdokumenten der WebBox allerdings die Gesamtstruktur mit dem Kopf-Teil, dem HTML-Element <code>head</code>.</p>
-<p>Werden mit der WebBox erstellte Textdokumente mit der zuvor beschriebenen Funktion <code>Inhalte ansehen</code> dargestellt, also über ihren URL aufgerufen, gibt die WebBox deren HTML-Inhalt aus, was im Webbrowser wie eine HTML-Seite aussieht. Der Webbrowser verwendet zur Anzeige Standardeinstellungen für die Gestaltung des Dokuments, deshalb kann die Darstellung von Browser zu Browser unterschiedlich ausfallen.</p>
-<p>Gibt man beim Speichern des Textdokuments einen Namen an der mit <code>.htm i</code> endet bettet die WebBox den Inhalt des Textdokuments in eine komplette HTML-Struktur bestehend aus <code>head</code>- und <code>body</code>-Element ein und fügt Verweise auf Gestaltungsvorlagen hinzu (CSS-Stylesheets). Als Gestaltungsvorlage wird das der WebBox beiliegende Stylesheet von Bootstrap <code>/jslib/bootstrap/css/bootstrap.min.css</code> sowie die Datei <code>stile.css</code> eingebettet. Legt man im Ordner, in dem das betrffende Textdokument abgelegt ist, eine Datei <code>stile.css</code> an, können dem Textdokument auf diese Weise eigene Gestaltungsvorgaben mitgegeben werden.</p>
-<h3>Textdokumente als HTML exportieren</h3>
-<p>Um ein Textdokument, das mit der WebBox erstellt wurde, auch ohne eine WebBox einfach im Browser ansehen zu können, muss es als HTML-Seite vorliegen. Mit dem Punkt <code>Export HTML</code> im Menü <code>Datei</code> werden zu diesem Zweck alle Textdokumente, also die <code>.htm i</code>-Dateien, des aktuell geöffneten Ordners als HTML-Seiten erzeugt. Die HTML-Seiten werden dazu in einen Ordner gelegt, der genauso heißt wie der aktuell geöffnete Ordner und dessen Name der Zusatz _html angehängt wurde. Dieser neue Ordner liegt nach dem HTML-Export in dem Ordner, in dem der aktuell geöffnete Ordner liegt.</p>
-<h2><a name="upload"></a>Inhalte zur WebBox übertragen</h2>
-<p>Lokale Inhalte werden zur WebBox übertragen und im aktuellen Verzeichnis abgelegt, wenn sie per Ziehen und Ablegen (Drag and Drop) im gerade geöffneten Ordner der Dateiverwaltung 'fallengelassen' werden.</p>
-<h3>WebDAV verwenden</h3>
-<p>Die WebBox stellt einen zentralen Ordner zur Verwendung von WebDAV bereit. Über folgenden URL kann per WebDAV auf die WebBox zugegriffen werden.</p>
-<p><code>https://localhost:8442/dav</code></p>
-<p>Der obige URL verweist auf den Ordner <code>dav</code> im Datenverzeichnis der WebBox, also den Ordner <code>$wbx/daten/dav</code>. Benutzer mit Rolle <code>wbxAdmin</code> können in der Dateiverwaltung der WebBox den Ordner <code>$daten</code> verwenden, um auf Inhalte des dort zugänglichen Ordners <code>dav</code> zuzugreifen. Auf diese Weise können via WebDAV auf die WebBox übertragene Dateien auch über die Dateiverwaltung der WebBox an andere Ablageorte kopiert werden.</p>
-<p>Benutzer, die den Zugriff via WebDAV nutzen sollen müssen die Rolle <code>davNutzer</code> besitzen. </p>
-<h2><a name="bilder"></a>Bilder verwenden</h2>
-<p>Werden Bilder des Typs JPEG, PNG oder GIF auf die WebBox übertragen, erscheint für sie als Dateisymbol eine Minituransicht des Bildinhalts. Das Bild kann angesehen werden wie im Abschnitt Inhalte ansehen beschrieben. Die Miniaturansicht eines Bildes wird zudem von der WebBox dynamisch erzeugt und kann angesehen werden, wenn dem Namen des Bildes im URL der Zusatz <code>_tn</code> hinzugefügt wird.</p>
-<p>Ist beispielsweise eine Bilddatei <code>MeinBild.png</code> im Ordner <code>Persoenlich/Bilder</code> des Nutzers <code>fred</code> abgelegt, kann ihre Minituransicht mit folgendem URL angesehen werden:</p>
-<p style="padding-left: 30px;"><code>http://localhost:8098/home/fred/Bilder/MeinBild_tn.png</code></p>
-<p>Auf diese Weise müssen nicht die unter Umständen großen Datenmengen des Originalbildes für eine Miniatur-Vorschau übertragen werden. <span style="font-size: 1em;">Neben der Miniaturansicht lassen sich die folgenden weiteren Bildgrößen erzeugen:</span></p>
-<table>
-<tbody>
-<tr>
-<td><strong>Größe</strong></td>
-<td><strong>Endung</strong></td>
-</tr>
-<tr>
-<td>120</td>
-<td>_tn</td>
-</tr>
-<tr>
-<td>240</td>
-<td>_kl</td>
-</tr>
-<tr>
-<td>500</td>
-<td>_dd</td>
-</tr>
-<tr>
-<td>700</td>
-<td>_mt</td>
-</tr>
-<tr>
-<td>1200</td>
-<td>_gr</td>
-</tr>
-</tbody>
-</table>
-<p> </p>
-<p>Ohne Endung wird das Bild in Originalgröße ausgegeben.</p>
-<p>Bilder können mit Hilfe des Dokumenteditors in Dokumente eingebunden werden. Vom Ablageort des betreffenden Dokuments ausgehend genügt eine relative Pfadangabe. Zum Beispiel könnte ein Dokument im Ordner <code>Persoenlich</code> des Nutzers <code>fred</code> das oben erwähnte Bild mit der relativen Angabe <code>Bilder/MeinBild.png</code> einbinden.</p>
-<h3>Bilder betrachten (Diashow)</h3>
-<p>Aus der Dateiverwaltung der WebBox heraus können Bilder als Diashow betrachtet werden. Dazu wird die Diashow-Funktion zunächst eingeschaltet, indem der Punkt "Diashow nicht zeigen" gewählt wird. Damit wird die standardmäßig ausgeschaltete Diashow-Funktion aktiviert. Anschließend wird ein Ordner geöffnet, der Bilder enthält. Mit Klick auf eines der Bilder wird die Diashow gestartet.</p>
-<p>Sollen Bilder wieder als Dateien in der Dateiverwaltung behandelt werden, beispielweise zum Markieren einzelner Bilddateien, wird die Funktion "Diashow zeigen" im Menü gewählt. Damit wird die Diashow-Funktion ausgeschaltet.</p>
-<h2><a name="mng-user"></a>Benutzer verwalten</h2>
-<p>Eine WebBox kann von verschiedenen Benutzern zugleich verwendet werden. Jedem Nutzer muss in der Benutzerverwaltung ein Benutzerkonto angelegt werden. </p>
-<h3>Rollen und der Benutzer <code>admin</code></h3>
-<p>Den Zugang zu Inhalten regelt die WebBox über Rollen, die ein Benutzer besitzen kann. Über die Benutzerverwaltung können Rollen erteilt und entzogen werden. Im Auslieferungszustand der WebBox ist diese mit einem Benutzer namens <code>admin</code> ausgestattet. Der Benutzer <code>admin</code> besitzt die folgenden Rollen:</p>
-<p style="padding-left: 30px;"><code>nutzerAdmin</code> - Benutzer verwalten<br /><code>wbxAdmin</code> - Apps verwalten<br /><code>ownFileAdmin</code> - eigene Dateien verwalten<br /><code>sqlKonsole</code> - Datenbanken verwalten<br /><code>nutzerProfil</code> - Angaben zur Person und eigenes Kennort ändern<br /><code>manager-script</code> - interne Rolle zur Verwaltung von Apps</p>
-<p>Mit dem Benutzer <code>admin</code> kann die erste Einrichtung der WebBox erfolgen. Das Kennwort des Benutzers <code>admin</code> lautet <code>admin</code>. Bevor die WebBox für andere Zwecke verwendet wird sollte mit Hilfe des Benutzers <code>admin</code> mindestens ein anderer Benutzer angelegt werden, der die obigen Rollen besitzt. Anschließend sollte der Benutzer <code>admin</code> gelöscht werden.</p>
-<p>Um die Verwaltung der WebBox von deren Nutzung abzugrenzen empfiehlt es sich, mindestens einen weiteren Benutzer anzulegen, der nur die Rolle <code>ownFileAdmin</code> besitzt. Nur Benutzer, die Teile der WebBox administrieren sollen, benötigen die Rollen <code>nutzerAdmin</code>, <code>wbxAdmin</code> und <code>manager-script</code>.</p>
-<h3>Aufruf der Benutzerverwaltung</h3>
-<p>Die Benutzerverwaltung der WebBox wird mit der Schaltfläche <code>Benutzer</code> auf der Hauptseite aufgerufen. </p>
-<p style="padding-left: 30px;"><a href="Bilder/verwaltung.png" data-lightbox="verwaltung2"> <img style="margin: 5px 10px; border: 1px solid black;" src="Bilder/verwaltung_tn.png" alt="foto" width="120" height="50" /></a></p>
-<p style="padding-left: 30px;"><em>Die Schaltfläche 'Benutzer'</em> <br /> <span style="font-size: x-small;">(für eine größere Ansicht das Bild anklicken)</span></p>
-<p>Mit Betätigen der Schaltfläche <code>Benutzer</code> erscheint zunächst die Anmeldeseite und nach erfolgreicher Anmeldung die Benutzerverwaltung.</p>
-<p style="padding-left: 30px;"><a href="Bilder/benutzerverwaltung.png" data-lightbox="benutzerverwaltung"> <img style="margin: 5px 10px; border: 1px solid black;" src="Bilder/benutzerverwaltung_tn.png" alt="foto" width="120" height="100" /> </a></p>
-<p style="padding-left: 30px;"><em>Die Benutzerverwaltung der WebBox</em> <br /> <span style="font-size: x-small;">(für eine größere Ansicht das Bild anklicken)</span></p>
-<p>Nur Benutzer mit der Rolle <code>nutzerAdmin</code> können die Benutzerverwaltung aufrufen.</p>
-<h3>Benutzer anlegen</h3>
-<p>Mit Betätigen der Schaltfläche <code>Neu</code> erscheint das Formular zur Anlage eines Benutzers. </p>
-<p style="padding-left: 30px;"><a href="Bilder/nutzer-neu.png" data-lightbox="nutzer-neu"> <img style="margin: 5px 10px; border: 1px solid black;" src="Bilder/nutzer-neu_tn.png" alt="foto" width="120" height="100" /> </a></p>
-<p style="padding-left: 30px;"><em>Formular zur Anlage eines Benutzers</em> <br /> <span style="font-size: x-small;">(für eine größere Ansicht das Bild anklicken)</span></p>
-<p>Hier können Angaben zum Benutzer gemacht und ein Kennwort erteilt werden. Der neue Benutzer wird angelegt, wenn die Schaltfläche <code>Speichern</code> betätigt wird.</p>
-<p>Die WebBox speichert die Angaben zum Benutzer in einer Datenbank im Ordner <code>$wbx/daten/db</code>. Kennworte werden dabei verschlüsselt in der Datenbank abgelegt und sind auch für Administratoren der Maschine, auf der die WebBox läuft nicht im Klartext lesbar.</p>
-<h3>Rollen erteilen und entziehen</h3>
-<p>Wird in der Liste der Benutzer einer der Anmeldenamen geklickt erscheint die Rollen-Ansicht.</p>
-<p style="padding-left: 30px;"><a href="Bilder/rollen.png" data-lightbox="rollen"> <img style="margin: 5px 10px; border: 1px solid black;" src="Bilder/rollen_tn.png" alt="foto" width="120" height="100" /> </a></p>
-<p style="padding-left: 30px;"><em>Die Rollen-Ansicht der WebBox</em> <br /> <span style="font-size: x-small;">(für eine größere Ansicht das Bild anklicken)</span></p>
-<p>Oben sind die Rollen zu sehen, die der Benutzer besitzt. Unten erscheinen die verfügbaren Rollen. Mit den Schaltflächen <code>Erteilen</code> und <code>Entziehen</code> werden dem Benutzer Rollen erteilt und entzogen. Eine neue Rolle kann mit der Schaltfläche <code>Neu</code> angelegt werden.</p>
-<h3>Eigenes Kennwort ändern</h3>
-<p>Jeder Benutzer kann sein eigenes Kennwort und die Angaben zur eigenen Person selbst ändern. Die Funktion ist unabhängig von den übrigen Funktionen der Benutzerverwaltung und an die Rolle <code>nutzerProfil</code> geknüpft, die jedem Benutzer erteilt sein muss.</p>
-<p>Zur Änderung dieser Angaben wird im Menü der Punkt <code>Profil</code> gewählt.</p>
-<h2><a name="mng-apps"></a>Apps verwalten</h2>
-<p>Die WebBox kann Programme ausführen, die ein Benutzer zu diesem Zweck auf die WebBox überträgt. Solche Programme werden an dieser Stelle Apps genannt. Ob eine App auf der WebBox läuft ist gewöhnlich an ihrer Dateiendung <code>.war</code> erkennbar und in der Dokumentation zur App erwähnt.</p>
-<h3>Aufruf der App-Verwaltung</h3>
-<p>Die App-Verwaltung der WebBox wird mit der Schaltfläche <code>Apps</code> auf der Hauptseite aufgerufen. </p>
-<p style="padding-left: 30px;"><a href="Bilder/verwaltung.png" data-lightbox="verwaltung3"> <img style="margin: 5px 10px; border: 1px solid black;" src="Bilder/verwaltung_tn.png" alt="foto" width="120" height="50" /></a></p>
-<p style="padding-left: 30px;"><em>Die Schaltfläche 'Apps'</em> <br /> <span style="font-size: x-small;">(für eine größere Ansicht das Bild anklicken)</span></p>
-<p>Mit Betätigen der Schaltfläche <code>Apps</code> erscheint zunächst die Anmeldeseite und nach erfolgreicher Anmeldung die App-Verwaltung.</p>
-<p style="padding-left: 30px;"><a href="Bilder/apps.png" data-lightbox="apps"> <img style="margin: 5px 10px; border: 1px solid black;" src="Bilder/apps_tn.png" alt="foto" width="120" height="70" /> </a></p>
-<p style="padding-left: 30px;"><em>Die App-Verwaltung der WebBox</em> <br /> <span style="font-size: x-small;">(für eine größere Ansicht das Bild anklicken)</span></p>
-<p>Nur Benutzer mit der Rolle <code>wbxAdmin</code> können die App-Verwaltung aufrufen.</p>
-<h3>App an die WebBox übertragen</h3>
-<p>Betätige zur Übertragung einer App auf die WebBox zunächst die Schaltfläche <code>Durchsuchen</code>. Navigiere zum Ablageort des Webarchivs, das die App enthält und wähle sie aus. Der Name eines solchen Webarchivs endet üblicherweise mit <code>.war</code> und erscheint neben der Schaltfläche <code>Durchsuchen</code>, sobald er ausgewählt wurde.</p>
-<p>Die App wird an die WebBox übertragen, wenn die Schaltfläche <code>Deploy</code> betätigt wird. In aller Regel wird die App von der WebBox ausgeführt, nachdem die Übertragung abgeschlossen ist. Die Kombination aus dem Übertragen der App an die WebBox, deren dortige Vorbereitung zur Ausführung und ggf. das Ausführen wird <em>Deploy</em> genannt.</p>
-<p>Die App erscheint in der Liste der Apps, sobald die Übertragung abgeschlossen ist.</p>
-<h3>Ausführung einer App stoppen</h3>
-<p>Die Ausführung einer App wird gestoppt, indem ihr Eintrag in der Liste der Apps gewählt und die Schaltfläche <code>Stopp</code> betätigt wird. Mit der Schaltfläche <code>Start</code> kann die App wieder ausgeführt werden. Die App bleibt gestoppt bis sie von einem Administrator der App-Verwaltung wieder gestartet wird.</p>
-<h3>App löschen</h3>
-<p>Auswahl einer App aus der Liste der Apps und Betätigen der Schaltfläche <code>Entfernen</code> stoppt die App und löscht sie von der WebBox.</p>
-<h3>Interne Apps entsperren</h3>
-<p>Teile der WebBox sind selbst als Apps angelegt. Diese sollen nicht unbeabsichtigt gestoppt oder gelöscht werden und sind in der App-Verwaltung für solche Aktionen gesperrt. Die Sperre gilt für folgende Apps:</p>
-<p style="padding-left: 30px;"><code>/wbx</code> - Bedienoberfläche der App-Verwaltung<br /><code>/um</code> - Benutzerverwaltung<br /><code>/file-cms</code> - Dateiverwaltung der WebBox<br /><code>/wbx-dbcon</code> - Datenbank-Konsole der WebBox<br /><code>/home</code> - Persönliche Nutzerdaten<br /><code>/data</code> - Öffentliche Nutzerdaten<br /><code>/</code> - Hauptseite der WebBox, der sogennante ROOT-Kontext<br /><code>/manager</code> - interner Teil der App-Verwaltung<br /><code>/jslib</code> - Javacsript-Ressourcen der WebBox</p>
-<p>Mit dem Punkt <code>Interne Apps entsperren</code> im Menü <code>Apps</code> kann die Sperre gelöst werden. <strong>Vorsicht:</strong> Das Stoppen oder Entfernen einer der oben aufgeführten Apps führt dazu, dass die WebBox nicht mehr richtig funktioniert.</p>
-<h2><a name="mng-db"></a>Datenbanken verwalten</h2>
-<p>Die WebBox stellt Datenbanken und deren Inhalt über einen eigenen Derby Network Server bereit. Die Datenbankfunktion der WebBox ist hauptsächlich für Apps vorgesehen, die sie zur strukturierten Ablage und Verwaltung von Daten verwenden können.</p>
-<p>Die Datenbanken der WebBox sind nur auf der Maschine zugänglich, auf der die WebBox läuft. Aufruf und Nutzung des Datenbankservers erfolgt über die Java Database Connectivity (JDBC) mit folgendem URL</p>
-<p style="padding-left: 30px;"><code>jdbc:derby://localhost:1528/[Name der Datenbank];create=true</code></p>
-<p>Datenbanken verwaltet der Datenbankserver der WebBox im eigenen Datenverzeichnis selbsttätig. Der Zusatz <code>;create=true</code> veranlaßt den Datenbankserver der WebBox, die betreffende Datenbank im Datenverzeichnis zu erstellen, wenn sie noch nicht existiert. Dabei wird keine Datenbankstruktur wie z.B. Tabellen oder Indizes erstellt, diese muss mit entsprechenden SQL-Kommandos von der App oder von Hand in der Datenbank-Konsole erzeugt werden.</p>
-<h3>Aufruf der Datenbank-Konsole</h3>
-<p>Zum Umgang mit Datenbanken enthält die WebBox eine Datenbank-Konsole. Kommandos der Structured Query Language (SQL) können über die Datenbank-Konsole eingegeben und ausgeführt werden. Sie wird mit der Schaltfläche <code>Datenbank</code> auf der Hauptseite aufgerufen. </p>
-<p style="padding-left: 30px;"><a href="Bilder/verwaltung.png" data-lightbox="verwaltung4"> <img style="margin: 5px 10px; border: 1px solid black;" src="Bilder/verwaltung_tn.png" alt="foto" width="120" height="50" /></a></p>
-<p style="padding-left: 30px;"><em>Die Schaltfläche 'Datenbank'</em> <br /> <span style="font-size: x-small;">(für eine größere Ansicht das Bild anklicken)</span></p>
-<p>Mit Betätigen der Schaltfläche <code>Datenbank</code> erscheint zunächst die Anmeldeseite und nach erfolgreicher Anmeldung die Datenbank-Konsole.</p>
-<p style="padding-left: 30px;"><a href="Bilder/dbcon.png" data-lightbox="dbcon"> <img style="margin: 5px 10px; border: 1px solid black;" src="Bilder/dbcon_tn.png" alt="foto" width="120" height="70" /> </a></p>
-<p style="padding-left: 30px;"><em>Die Datenbank-Konsole der WebBox</em> <br /> <span style="font-size: x-small;">(für eine größere Ansicht das Bild anklicken)</span></p>
-<p>Nur Benutzer mit der Rolle <code>sqlKonsole</code> können die Datenbank-Konsole aufrufen.</p>
-<h3>Datenbank-Verbindung erstellen</h3>
-<p>Die Arbeit mit einer Datenbank aus der Datenbank-Konsole heraus erfordert die Anlage einer Datenbank-Verbindung. Mit Auswahl von <code>Neu..</code> aus dem Mneü <code>Datenbank</code> erscheint der Dialog zur Anlage einer neuen Datenbank-Verbindung.</p>
-<p style="padding-left: 30px;"><a href="Bilder/db_neu.png" data-lightbox="dbneu"> <img style="margin: 5px 10px; border: 1px solid black;" src="Bilder/db_neu_tn.png" alt="foto" width="120" height="70" /> </a></p>
-<p style="padding-left: 30px;"><em>Der Dialog Neue Datenbankverbindung</em> <br /> <span style="font-size: x-small;">(für eine größere Ansicht das Bild anklicken)</span></p>
-<p>Hier wird der Name der Datenbank angegeben und die Schaltfläche <code>Neu</code> betätigt. Die Datenbankverbindung wird erstellt und ihr Name erscheint in der Seitenleiste links.</p>
-<h3>SQL-Kommandos anwenden</h3>
-<p><a href="https://builds.apache.org/job/Derby-docs/lastSuccessfulBuild/artifact/trunk/out/ref/crefsqlj23296.html">Kommandos der Structured Query Language</a> (SQL) sind ein mächtiges Werkzeug zur Arbeit mit Datenbanken. Mit ihnen lassen sich Datenbankstrukturen ebenso wie Datenbankinhalte erstellen und ändern. Mit der Datenbank-Konsole der WebBox können beliebige einzelne SQL-Kommandos wie auch SQL-Skripte an die Datenbank abgesetzt werden.</p>
-<p>Die betreffenden SQL-Kommandos werden dazu in der Textbox rechts oben in der Datenbank-Konsole eingetragen und die Schaltfläche Ausführen betätigt. Ergebnisse der Ausführung wie zum Beispiel die Antwort auf ein SELECT-Kommando werden im unteren Teil der Datenbank-Konsole als Ergebnistabelle dargestellt.</p>
-<p><strong>Vorsicht</strong>: Ein falsches SQL-Kommando kann Inhalt oder Struktur einer Datenbank beschädigen und zu Datenverlust führen. Die Datenbank-Konsole darf nur mit größtem Bedacht verwendet werden, ihre Verwendung geschieht auf eigenes Risiko.</p>
\ No newline at end of file
diff --git a/web/META-INF/daten/www/dok/wbx/Betrieb-Docker.htmi b/web/META-INF/daten/www/dok/wbx/Betrieb-Docker.htmi
deleted file mode 100644
index fa77119..0000000
--- a/web/META-INF/daten/www/dok/wbx/Betrieb-Docker.htmi
+++ /dev/null
@@ -1,29 +0,0 @@
-<h1>Betrieb</h1>
-<p>In den folgenden Abschnitten ist der Betrieb der <a href="http://uhilger.de/dev/Software/WebBox/WebBox">WebBox</a> als Docker-Container beschrieben:</p>
-<p style="padding-left: 30px;"><a href="#start">WebBox starten</a><br /><a href="#stopp">WebBox stoppen</a><br /><a href="#bak">Daten sichern</a><br /><a href="#sec">Datensicherheit</a><br /><a href="#anpassen">WebBox an eigene Zwecke anpassen</a></p>
-<p> </p>
-<h2><a name="start"></a>WebBox starten</h2>
-<p>Nach der <a href="Installation.htmi">Installation</a> werden zum Start der WebBox die folgenden Schritte ausgeführt.</p>
-<ol>
-<li>Datenbank-Container starten<br /><code>docker run -v `pwd`/derby-daten:/dbs --name derby --rm -d -p 1527:1527 az82/docker-derby</code></li>
-<li>WebBox starten<br /><code>docker run -it --rm --name tc -d -p 8080:8080 -p 8443:8443 -v `pwd`/tc-daten:/tc-daten --link derby:dbsrv wbx</code></li>
-</ol>
-<p>Damit ist die WebBox bereit zur <a href="Bedienung.htmi">Verwendung</a>.</p>
-<p>Die im Aufruf oben angegebenen Ports für die WebBox können beliebig gewählt werden. Das selbe gilt für den Port des Datenbank-Containers. Für eine Änderung des Ports des Datenbank-Containers muss der geänderte Port zusätzlich zum obigen Aufruf auch in der Datei <code>META-INF/context.xml</code> der Nutzerverwaltung und der Datenbankverwaltung angepasst werden.</p>
-<h2><a name="stopp"></a>WebBox stoppen</h2>
-<p>Zum Stoppen der WebBox werden die folgenden Schritte ausgeführt.</p>
-<ol>
-<li>WebBox stoppen<br /><code>docker exec tc "bin/shutdown.sh"</code></li>
-<li>Datenbank-Container stoppen<br /><code>docker exec derby java org.apache.derby.drda.NetworkServerControl shutdown</code></li>
-</ol>
-<h2><a name="bak"></a>Daten sichern</h2>
-<p>Die WebBox legt alle veränderlichen Nutzerdaten in den Volumes <code>/derby-daten</code> und <code>/tc-daten</code> im Arbeitsverzeichnis ab, aus dem heraus die Docker-Container gestartet werden. Eine regelmäßige Kopie von <code>/derby-daten</code> und <code>/tc-daten</code> v<span style="font-size: 1em;">ermeidet Datenverlust im Falle von Störungen oder Fehlern.</span></p>
-<h3><a name="sec"></a>Datensicherheit</h3>
-<p>Die WebBox bewirkt keine Zugriffsbeschränkungen auf der Ebene des Betriebssystems, auf dem Docker läuft. Jeder Benutzer der WebBox kann so auf Inhalte des Rechners zugreifen, auf dem Docker läuft, wie es der Systemadministrator des Rechners festgelegt hat.</p>
-<p>Über die Benutzerverwaltung der WebBox erteilte Berechtigungen bewirken lediglich Beschränkungen des Zugriffs innerhalb der WebBox und regeln beispielsweise, welcher Benutzer die Benutzerverwaltung der WebBox oder die Dateiverwaltung der WebBox verwenden darf.</p>
-<p>Mit welchen Rechten zum Beispiel aus der Dateiverwaltung der WebBox heraus auf Dateien zugegriffen werden darf, muss je nach gewünschter Berechtigung nötigenfalls vom Systemadministrator des Rechners, auf dem Docker läuft, konfiguriert werden. </p>
-<h3>Programme</h3>
-<p>Die WebBox ermöglicht die Ausführung von Programmen auf dem WebBox-Container. Benutzer der WebBox können mit der WebBox Programme ausführen, mit denen es möglich ist, auf Daten des WebBox-Containers zuzugreifen.</p>
-<p>Um zu verhindern, dass auf diesem Weg der Benutzer einer WebBox auf Daten des WebBox-Containers zugreift, dürfen in der Benutzerverwaltung der WebBox die Rollen <code>manager-script</code>, <code>manager-gui</code>, <code>nutzerAdmin</code> und <code>wbxAdmin</code> nur Nutzern erteilt werden, die berechtigt sind, auf Daten des WebBox-Containers zuzugreifen.</p>
-<h2><a name="anpassen"></a>WebBox an eigene Zwecke anpassen</h2>
-<p>Kundige Benutzer können die WebBox an ihre Bedürfnisse anpassen. Informationen über ihren Aufbau liefert die <a href="http://uhilger.de/gitblit/docs/wbx-shell.git">Dokumentation im Repository</a>.</p>
\ No newline at end of file
diff --git a/web/META-INF/daten/www/dok/wbx/Betrieb.htmi b/web/META-INF/daten/www/dok/wbx/Betrieb.htmi
deleted file mode 100644
index 985c57f..0000000
--- a/web/META-INF/daten/www/dok/wbx/Betrieb.htmi
+++ /dev/null
@@ -1,34 +0,0 @@
-<h1>Betrieb</h1>
-<p>In den folgenden Abschnitten ist der Betrieb der <a href="http://uhilger.de/dev/Software/WebBox/WebBox">WebBox</a> beschrieben:</p>
-<p style="padding-left: 30px;"><a href="#start">WebBox starten</a><br /><a href="#stopp">WebBox stoppen</a><br /><a href="#bak">Daten sichern</a><br /><a href="#sec">Datensicherheit</a><br /><a href="#anpassen">WebBox an eigene Zwecke anpassen</a></p>
-<p> </p>
-<h2><a name="start"></a>WebBox starten</h2>
-<p>Nach der <a href="Installation.htmi">Installation</a> wird zum Start der WebBox das Skript <code>$wbx/start.sh</code> bzw. sein Windows-Pendant <code>$wbx/start.bat</code> ausgeführt wie nachfolgend im Detail beschrieben. Nach dem Start ist die WebBox bereit zur <a href="Bedienung.htmi">Verwendung</a>.</p>
-<h3>Linux und Mac OS</h3>
-<p>Wir nehmen an, die WebBox ist im Verzeichnis <code>/home/fred/wbx</code> abgelegt. Zum Start der WebBox wird auf der Kommandozeile eingegeben</p>
-<p style="padding-left: 30px;"><code>cd /home/fred/wbx</code><br /><code>./start.sh</code></p>
-<p>Stattdessen kann die WebBox auch aus der Dateiverwaltung bzw. dem Finder heraus gestartet werden indem ein Doppelklick auf das Symbol der Datei <code>start.sh</code> ausgeführt wird. Siehe hierzu gegebenenfalls <a href="http://uhilger.de/dev/Tipps/Skript-starten-mit-Ubuntu-Unity">diesen Tipp</a>.</p>
-<h3>Windows</h3>
-<p>Unter Windows läßt sich die WebBox aus der Dateiverwaltung heraus durch Doppelklick auf das Symbol der Datei <code>start.bat</code> ausführen. Auch unter Windows kann man stattdessen das Skript von der Kommandozeile starten.</p>
-<h3>Kein Eingriff ins System</h3>
-<p>Start und Betrieb der WebBox machen keine Änderungen am System der Maschine, auf der die WebBox installiert wurde. Alle Aktivitäten der WebBox finden im Ordner <code>$wbx</code> statt, der bei der <a href="Installation.htmi">Installation</a> angelegt wurde.</p>
-<h2><a name="stopp"></a>WebBox stoppen</h2>
-<p>Zum Stoppen der WebBox wird genauso vorgegangen wie beim Start, allerdings wird zum Stoppen das Skript <code>stopp.sh</code> bzw. <code>stopp.bat</code> verwendet.</p>
-<h2><a name="bak"></a>Daten sichern</h2>
-<p>Die WebBox legt alle veränderlichen Nutzerdaten im Verzeichnis <code>$wbx/daten</code> ab. Dort finden sich die Unterverzeichnisse</p>
-<ul>
-<li><code>db</code> (Datenbanken)</li>
-<li><code>home</code> (persönliche Daten)</li>
-<li><code>www</code> (öffentliche Daten)</li>
-</ul>
-<p>Eine regelmäßige Kopie von <code>$wbx/daten</code> vermeidet Datenverlust im Falle von Störungen oder Fehlern.</p>
-<h3>Protokolle</h3>
-<p>Neben den oben erwähnten Ablageorten legt die WebBox im Ordner <code>$wbx/sys/base/logs</code> Protokolle an. Mit den Protokollen können z.B. nachträglich Störungen nachvollzogen werden. Die dort entstehenden Daten sollten regelmäßig gelöscht werden um ein unkontrolliertes Anwachsen des Protokollverzeichnisses zu vermeiden.</p>
-<h2><a name="sec"></a>Datensicherheit</h2>
-<p>Die WebBox bewirkt keine Zugriffsbeschränkungen auf der Ebene des Betriebssystems des Rechners, auf dem die WebBox läuft, dem WebBox-Rechner. Jeder Benutzer des WebBox-Rechners kann so auf Inhalte des Rechners zugreifen, wie es der Systemadministrator des Rechners festgelegt hat.</p>
-<p>Über die Benutzerverwaltung der WebBox erteilte Berechtigungen bewirken Beschränkungen des Zugriffs über die WebBox. Solange die WebBox läuft, unterliegen Zugriffe den Regeln, die in der Benutzerverwaltung der WebBox festgelegt sind. Diese Regeln bewirken im Auslieferungszustand der WeBox, dass nur Daten im Verzeichnis <code>$wbx/daten </code>des WebBox-Rechners über die WebBox zugänglich sind.</p>
-<h3>Programme</h3>
-<p>Die WebBox ermöglicht die Ausführung von Programmen auf dem WebBox-Rechner. Benutzer der WebBox können mit der WebBox Programme ausführen, mit denen es möglich ist, auf Daten des WebBox-Rechners zuzugreifen.</p>
-<p>Um zu verhindern, dass auf diesem Weg der Benutzer einer WebBox auf Daten des WebBox-Rechners zugreift, dürfen in der Benutzerverwaltung der WebBox die Rollen <code>manager-script</code>, <code>manager-gui</code>, <code>nutzerAdmin</code> und <code>wbxAdmin</code> nur Nutzern erteilt werden, die berechtigt sind, auf Daten des WebBox-Rechners zuzugreifen.</p>
-<h2><a name="anpassen"></a>WebBox an eigene Zwecke anpassen</h2>
-<p>Kundige Benutzer können die WebBox an ihre Bedürfnisse anpassen. Informationen über ihren Aufbau liefert die <a href="http://uhilger.de/gitblit/docs/wbx-shell.git">Dokumentation im Repository</a>.</p>
\ No newline at end of file
diff --git a/web/META-INF/daten/www/dok/wbx/Bilder/apps.png b/web/META-INF/daten/www/dok/wbx/Bilder/apps.png
deleted file mode 100644
index c76b5ba..0000000
--- a/web/META-INF/daten/www/dok/wbx/Bilder/apps.png
+++ /dev/null
Binary files differ
diff --git a/web/META-INF/daten/www/dok/wbx/Bilder/benutzerverwaltung.png b/web/META-INF/daten/www/dok/wbx/Bilder/benutzerverwaltung.png
deleted file mode 100644
index f1eb879..0000000
--- a/web/META-INF/daten/www/dok/wbx/Bilder/benutzerverwaltung.png
+++ /dev/null
Binary files differ
diff --git a/web/META-INF/daten/www/dok/wbx/Bilder/dateiverwaltung.png b/web/META-INF/daten/www/dok/wbx/Bilder/dateiverwaltung.png
deleted file mode 100644
index ebd96a2..0000000
--- a/web/META-INF/daten/www/dok/wbx/Bilder/dateiverwaltung.png
+++ /dev/null
Binary files differ
diff --git a/web/META-INF/daten/www/dok/wbx/Bilder/db_neu.png b/web/META-INF/daten/www/dok/wbx/Bilder/db_neu.png
deleted file mode 100644
index 9a684d5..0000000
--- a/web/META-INF/daten/www/dok/wbx/Bilder/db_neu.png
+++ /dev/null
Binary files differ
diff --git a/web/META-INF/daten/www/dok/wbx/Bilder/dbcon.png b/web/META-INF/daten/www/dok/wbx/Bilder/dbcon.png
deleted file mode 100644
index 2f36742..0000000
--- a/web/META-INF/daten/www/dok/wbx/Bilder/dbcon.png
+++ /dev/null
Binary files differ
diff --git a/web/META-INF/daten/www/dok/wbx/Bilder/dokeditor.png b/web/META-INF/daten/www/dok/wbx/Bilder/dokeditor.png
deleted file mode 100644
index 8983746..0000000
--- a/web/META-INF/daten/www/dok/wbx/Bilder/dokeditor.png
+++ /dev/null
Binary files differ
diff --git a/web/META-INF/daten/www/dok/wbx/Bilder/nutzer-neu.png b/web/META-INF/daten/www/dok/wbx/Bilder/nutzer-neu.png
deleted file mode 100644
index 90a6517..0000000
--- a/web/META-INF/daten/www/dok/wbx/Bilder/nutzer-neu.png
+++ /dev/null
Binary files differ
diff --git a/web/META-INF/daten/www/dok/wbx/Bilder/rollen.png b/web/META-INF/daten/www/dok/wbx/Bilder/rollen.png
deleted file mode 100644
index b388b2e..0000000
--- a/web/META-INF/daten/www/dok/wbx/Bilder/rollen.png
+++ /dev/null
Binary files differ
diff --git a/web/META-INF/daten/www/dok/wbx/Bilder/speichern-unter.png b/web/META-INF/daten/www/dok/wbx/Bilder/speichern-unter.png
deleted file mode 100644
index 30c2c62..0000000
--- a/web/META-INF/daten/www/dok/wbx/Bilder/speichern-unter.png
+++ /dev/null
Binary files differ
diff --git a/web/META-INF/daten/www/dok/wbx/Bilder/startseite.png b/web/META-INF/daten/www/dok/wbx/Bilder/startseite.png
deleted file mode 100644
index 067039e..0000000
--- a/web/META-INF/daten/www/dok/wbx/Bilder/startseite.png
+++ /dev/null
Binary files differ
diff --git a/web/META-INF/daten/www/dok/wbx/Bilder/texteditor.png b/web/META-INF/daten/www/dok/wbx/Bilder/texteditor.png
deleted file mode 100644
index a826124..0000000
--- a/web/META-INF/daten/www/dok/wbx/Bilder/texteditor.png
+++ /dev/null
Binary files differ
diff --git a/web/META-INF/daten/www/dok/wbx/Bilder/verwaltung.png b/web/META-INF/daten/www/dok/wbx/Bilder/verwaltung.png
deleted file mode 100644
index 017699c..0000000
--- a/web/META-INF/daten/www/dok/wbx/Bilder/verwaltung.png
+++ /dev/null
Binary files differ
diff --git a/web/META-INF/daten/www/dok/wbx/Installation.htmi b/web/META-INF/daten/www/dok/wbx/Installation.htmi
deleted file mode 100644
index f1da22d..0000000
--- a/web/META-INF/daten/www/dok/wbx/Installation.htmi
+++ /dev/null
@@ -1,24 +0,0 @@
-<h1>Installation</h1>
-<p>Die WebBox kann in zwei Arten installiert werden:</p>
-<ul>
-<li><a href="#docker-inst">Als Docker-Container</a>,</li>
-<li><a href="#filesys-inst">auf dem Dateisystem eines Rechners</a>.</li>
-</ul>
-<p>Nachfolgend ist beschrieben, wie diese Formen der Installation ausgeführt werden.</p>
-<h2><a name="docker-inst"></a>Installation als Docker-Container</h2>
-<p>Damit die WebBox als Docker-Container installiert werden kann, muss auf der betreffenden Maschine <a href="https://uhilger.de/dev/Artikel/coreos/Docker-CoreOS-VirtualBox">Docker</a> installiert sein. Ist Docker betriebsbereit, werden zur Installation der WebBox als Docker-Container die folgenden Schritte ausgeführt.</p>
-<ol>
-<li>Das Docker-Image der WebBox erzeugen<br /><code>docker build -t wbx https://uhilger.de/dl/wbx/wbxd.tar.gz</code></li>
-</ol>
-<p> <span style="font-size: 1em;">Nun ist die WebBox bereit zum</span><span style="font-size: 1em;"> </span><a style="font-size: 1em;" href="Betrieb-Docker.htmi">Start als Docker-Container</a><span style="font-size: 1em;">.</span></p>
-<h2><a name="filesys-inst"></a>Installation im Dateisystem</h2>
-<p>Zur Installation der <a href="http://uhilger.de/dev/Software/WebBox/WebBox">WebBox</a> im lokalen Dateisystem werden die folgenden Schritte ausgeführt.</p>
-<h3>Herunterladen und Entpacken</h3>
-<p>Mit der folgenden Verknüpfung kann die WebBox heruntergeladen werden:</p>
-<p style="padding-left: 30px;"><a href="http://uhilger.de/dl/wbx/wbx.zip">Herunterladen</a></p>
-<p>Die heruntergeladene Datei <code>wbx.zip</code> muss zunächst entpackt werden. Ihr Inhalt kann an einen frei wählbaren Ort abgelegt werden. Dieser Ablageort wird hier <code>$wbx</code> bezeichnet.</p>
-<h3>Java hinzufügen</h3>
-<p>Vor dem ersten Start der WebBox muss ein aktuelles Java Development Kit (JDK) beschafft werden, wie es z.B. von <a href="http://zulu.org/">Azul</a> erhältlich ist. Auch das JDK muss zunächst entpackt werden. Nach dem Entpacken wird der Inhalt in das Verzeichnis <code></code></p>
-<p style="padding-left: 30px;"><code>$wbx/sys/jrs/jvm</code></p>
-<p>verschoben.</p>
-<p>Nun ist die WebBox bereit zum <a href="Betrieb.htmi">Start aus dem Dateisystem</a>.</p>
\ No newline at end of file
diff --git a/web/META-INF/daten/www/dok/wbx/asciidoctor.css b/web/META-INF/daten/www/dok/wbx/asciidoctor.css
new file mode 100644
index 0000000..840fec9
--- /dev/null
+++ b/web/META-INF/daten/www/dok/wbx/asciidoctor.css
@@ -0,0 +1,427 @@
+/* Asciidoctor default stylesheet | MIT License | https://asciidoctor.org */
+/* Uncomment @import statement to use as custom stylesheet */
+/*@import "https://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,400italic,600,600italic%7CNoto+Serif:400,400italic,700,700italic%7CDroid+Sans+Mono:400,700";*/
+article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}
+audio,video{display:inline-block}
+audio:not([controls]){display:none;height:0}
+html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
+a{background:none}
+a:focus{outline:thin dotted}
+a:active,a:hover{outline:0}
+h1{font-size:2em;margin:.67em 0}
+abbr[title]{border-bottom:1px dotted}
+b,strong{font-weight:bold}
+dfn{font-style:italic}
+hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}
+mark{background:#ff0;color:#000}
+code,kbd,pre,samp{font-family:monospace;font-size:1em}
+pre{white-space:pre-wrap}
+q{quotes:"\201C" "\201D" "\2018" "\2019"}
+small{font-size:80%}
+sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
+sup{top:-.5em}
+sub{bottom:-.25em}
+img{border:0}
+svg:not(:root){overflow:hidden}
+figure{margin:0}
+fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}
+legend{border:0;padding:0}
+button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}
+button,input{line-height:normal}
+button,select{text-transform:none}
+button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}
+button[disabled],html input[disabled]{cursor:default}
+input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}
+button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}
+textarea{overflow:auto;vertical-align:top}
+table{border-collapse:collapse;border-spacing:0}
+*,*::before,*::after{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
+html,body{font-size:100%}
+body{background:#fff;color:rgba(0,0,0,.8);padding:0;margin:0;font-family:"Noto Serif","DejaVu Serif",serif;font-weight:400;font-style:normal;line-height:1;position:relative;cursor:auto;tab-size:4;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}
+a:hover{cursor:pointer}
+img,object,embed{max-width:100%;height:auto}
+object,embed{height:100%}
+img{-ms-interpolation-mode:bicubic}
+.left{float:left!important}
+.right{float:right!important}
+.text-left{text-align:left!important}
+.text-right{text-align:right!important}
+.text-center{text-align:center!important}
+.text-justify{text-align:justify!important}
+.hide{display:none}
+img,object,svg{display:inline-block;vertical-align:middle}
+textarea{height:auto;min-height:50px}
+select{width:100%}
+.center{margin-left:auto;margin-right:auto}
+.stretch{width:100%}
+.subheader,.admonitionblock td.content>.title,.audioblock>.title,.exampleblock>.title,.imageblock>.title,.listingblock>.title,.literalblock>.title,.stemblock>.title,.openblock>.title,.paragraph>.title,.quoteblock>.title,table.tableblock>.title,.verseblock>.title,.videoblock>.title,.dlist>.title,.olist>.title,.ulist>.title,.qlist>.title,.hdlist>.title{line-height:1.45;color:#7a2518;font-weight:400;margin-top:0;margin-bottom:.25em}
+div,dl,dt,dd,ul,ol,li,h1,h2,h3,#toctitle,.sidebarblock>.content>.title,h4,h5,h6,pre,form,p,blockquote,th,td{margin:0;padding:0;direction:ltr}
+a{color:#2156a5;text-decoration:underline;line-height:inherit}
+a:hover,a:focus{color:#1d4b8f}
+a img{border:0}
+p{font-family:inherit;font-weight:400;font-size:1em;line-height:1.6;margin-bottom:1.25em;text-rendering:optimizeLegibility}
+p aside{font-size:.875em;line-height:1.35;font-style:italic}
+h1,h2,h3,#toctitle,.sidebarblock>.content>.title,h4,h5,h6{font-family:"Open Sans","DejaVu Sans",sans-serif;font-weight:300;font-style:normal;color:#ba3925;text-rendering:optimizeLegibility;margin-top:1em;margin-bottom:.5em;line-height:1.0125em}
+h1 small,h2 small,h3 small,#toctitle small,.sidebarblock>.content>.title small,h4 small,h5 small,h6 small{font-size:60%;color:#e99b8f;line-height:0}
+h1{font-size:2.125em}
+h2{font-size:1.6875em}
+h3,#toctitle,.sidebarblock>.content>.title{font-size:1.375em}
+h4,h5{font-size:1.125em}
+h6{font-size:1em}
+hr{border:solid #dddddf;border-width:1px 0 0;clear:both;margin:1.25em 0 1.1875em;height:0}
+em,i{font-style:italic;line-height:inherit}
+strong,b{font-weight:bold;line-height:inherit}
+small{font-size:60%;line-height:inherit}
+code{font-family:"Droid Sans Mono","DejaVu Sans Mono",monospace;font-weight:400;color:rgba(0,0,0,.9)}
+ul,ol,dl{font-size:1em;line-height:1.6;margin-bottom:1.25em;list-style-position:outside;font-family:inherit}
+ul,ol{margin-left:1.5em}
+ul li ul,ul li ol{margin-left:1.25em;margin-bottom:0;font-size:1em}
+ul.square li ul,ul.circle li ul,ul.disc li ul{list-style:inherit}
+ul.square{list-style-type:square}
+ul.circle{list-style-type:circle}
+ul.disc{list-style-type:disc}
+ol li ul,ol li ol{margin-left:1.25em;margin-bottom:0}
+dl dt{margin-bottom:.3125em;font-weight:bold}
+dl dd{margin-bottom:1.25em}
+abbr,acronym{text-transform:uppercase;font-size:90%;color:rgba(0,0,0,.8);border-bottom:1px dotted #ddd;cursor:help}
+abbr{text-transform:none}
+blockquote{margin:0 0 1.25em;padding:.5625em 1.25em 0 1.1875em;border-left:1px solid #ddd}
+blockquote cite{display:block;font-size:.9375em;color:rgba(0,0,0,.6)}
+blockquote cite::before{content:"\2014 \0020"}
+blockquote cite a,blockquote cite a:visited{color:rgba(0,0,0,.6)}
+blockquote,blockquote p{line-height:1.6;color:rgba(0,0,0,.85)}
+@media screen and (min-width:768px){h1,h2,h3,#toctitle,.sidebarblock>.content>.title,h4,h5,h6{line-height:1.2}
+h1{font-size:2.75em}
+h2{font-size:2.3125em}
+h3,#toctitle,.sidebarblock>.content>.title{font-size:1.6875em}
+h4{font-size:1.4375em}}
+table{background:#fff;margin-bottom:1.25em;border:solid 1px #dedede}
+table thead,table tfoot{background:#f7f8f7}
+table thead tr th,table thead tr td,table tfoot tr th,table tfoot tr td{padding:.5em .625em .625em;font-size:inherit;color:rgba(0,0,0,.8);text-align:left}
+table tr th,table tr td{padding:.5625em .625em;font-size:inherit;color:rgba(0,0,0,.8)}
+table tr.even,table tr.alt{background:#f8f8f7}
+table thead tr th,table tfoot tr th,table tbody tr td,table tr td,table tfoot tr td{display:table-cell;line-height:1.6}
+h1,h2,h3,#toctitle,.sidebarblock>.content>.title,h4,h5,h6{line-height:1.2;word-spacing:-.05em}
+h1 strong,h2 strong,h3 strong,#toctitle strong,.sidebarblock>.content>.title strong,h4 strong,h5 strong,h6 strong{font-weight:400}
+.clearfix::before,.clearfix::after,.float-group::before,.float-group::after{content:" ";display:table}
+.clearfix::after,.float-group::after{clear:both}
+:not(pre):not([class^=L])>code{font-size:.9375em;font-style:normal!important;letter-spacing:0;padding:.1em .5ex;word-spacing:-.15em;background:#f7f7f8;-webkit-border-radius:4px;border-radius:4px;line-height:1.45;text-rendering:optimizeSpeed;word-wrap:break-word}
+:not(pre)>code.nobreak{word-wrap:normal}
+:not(pre)>code.nowrap{white-space:nowrap}
+pre{color:rgba(0,0,0,.9);font-family:"Droid Sans Mono","DejaVu Sans Mono",monospace;line-height:1.45;text-rendering:optimizeSpeed}
+pre code,pre pre{color:inherit;font-size:inherit;line-height:inherit}
+pre>code{display:block}
+pre.nowrap,pre.nowrap pre{white-space:pre;word-wrap:normal}
+em em{font-style:normal}
+strong strong{font-weight:400}
+.keyseq{color:rgba(51,51,51,.8)}
+kbd{font-family:"Droid Sans Mono","DejaVu Sans Mono",monospace;display:inline-block;color:rgba(0,0,0,.8);font-size:.65em;line-height:1.45;background:#f7f7f7;border:1px solid #ccc;-webkit-border-radius:3px;border-radius:3px;-webkit-box-shadow:0 1px 0 rgba(0,0,0,.2),0 0 0 .1em white inset;box-shadow:0 1px 0 rgba(0,0,0,.2),0 0 0 .1em #fff inset;margin:0 .15em;padding:.2em .5em;vertical-align:middle;position:relative;top:-.1em;white-space:nowrap}
+.keyseq kbd:first-child{margin-left:0}
+.keyseq kbd:last-child{margin-right:0}
+.menuseq,.menuref{color:#000}
+.menuseq b:not(.caret),.menuref{font-weight:inherit}
+.menuseq{word-spacing:-.02em}
+.menuseq b.caret{font-size:1.25em;line-height:.8}
+.menuseq i.caret{font-weight:bold;text-align:center;width:.45em}
+b.button::before,b.button::after{position:relative;top:-1px;font-weight:400}
+b.button::before{content:"[";padding:0 3px 0 2px}
+b.button::after{content:"]";padding:0 2px 0 3px}
+p a>code:hover{color:rgba(0,0,0,.9)}
+#header,#content,#footnotes,#footer{width:100%;margin-left:auto;margin-right:auto;margin-top:0;margin-bottom:0;max-width:62.5em;*zoom:1;position:relative;padding-left:.9375em;padding-right:.9375em}
+#header::before,#header::after,#content::before,#content::after,#footnotes::before,#footnotes::after,#footer::before,#footer::after{content:" ";display:table}
+#header::after,#content::after,#footnotes::after,#footer::after{clear:both}
+#content{margin-top:1.25em}
+#content::before{content:none}
+#header>h1:first-child{color:rgba(0,0,0,.85);margin-top:2.25rem;margin-bottom:0}
+#header>h1:first-child+#toc{margin-top:8px;border-top:1px solid #dddddf}
+#header>h1:only-child,body.toc2 #header>h1:nth-last-child(2){border-bottom:1px solid #dddddf;padding-bottom:8px}
+#header .details{border-bottom:1px solid #dddddf;line-height:1.45;padding-top:.25em;padding-bottom:.25em;padding-left:.25em;color:rgba(0,0,0,.6);display:-ms-flexbox;display:-webkit-flex;display:flex;-ms-flex-flow:row wrap;-webkit-flex-flow:row wrap;flex-flow:row wrap}
+#header .details span:first-child{margin-left:-.125em}
+#header .details span.email a{color:rgba(0,0,0,.85)}
+#header .details br{display:none}
+#header .details br+span::before{content:"\00a0\2013\00a0"}
+#header .details br+span.author::before{content:"\00a0\22c5\00a0";color:rgba(0,0,0,.85)}
+#header .details br+span#revremark::before{content:"\00a0|\00a0"}
+#header #revnumber{text-transform:capitalize}
+#header #revnumber::after{content:"\00a0"}
+#content>h1:first-child:not([class]){color:rgba(0,0,0,.85);border-bottom:1px solid #dddddf;padding-bottom:8px;margin-top:0;padding-top:1rem;margin-bottom:1.25rem}
+#toc{border-bottom:1px solid #e7e7e9;padding-bottom:.5em}
+#toc>ul{margin-left:.125em}
+#toc ul.sectlevel0>li>a{font-style:italic}
+#toc ul.sectlevel0 ul.sectlevel1{margin:.5em 0}
+#toc ul{font-family:"Open Sans","DejaVu Sans",sans-serif;list-style-type:none}
+#toc li{line-height:1.3334;margin-top:.3334em}
+#toc a{text-decoration:none}
+#toc a:active{text-decoration:underline}
+#toctitle{color:#7a2518;font-size:1.2em}
+@media screen and (min-width:768px){#toctitle{font-size:1.375em}
+body.toc2{padding-left:15em;padding-right:0}
+#toc.toc2{margin-top:0!important;background:#f8f8f7;position:fixed;width:15em;left:0;top:0;border-right:1px solid #e7e7e9;border-top-width:0!important;border-bottom-width:0!important;z-index:1000;padding:1.25em 1em;height:100%;overflow:auto}
+#toc.toc2 #toctitle{margin-top:0;margin-bottom:.8rem;font-size:1.2em}
+#toc.toc2>ul{font-size:.9em;margin-bottom:0}
+#toc.toc2 ul ul{margin-left:0;padding-left:1em}
+#toc.toc2 ul.sectlevel0 ul.sectlevel1{padding-left:0;margin-top:.5em;margin-bottom:.5em}
+body.toc2.toc-right{padding-left:0;padding-right:15em}
+body.toc2.toc-right #toc.toc2{border-right-width:0;border-left:1px solid #e7e7e9;left:auto;right:0}}
+@media screen and (min-width:1280px){body.toc2{padding-left:20em;padding-right:0}
+#toc.toc2{width:20em}
+#toc.toc2 #toctitle{font-size:1.375em}
+#toc.toc2>ul{font-size:.95em}
+#toc.toc2 ul ul{padding-left:1.25em}
+body.toc2.toc-right{padding-left:0;padding-right:20em}}
+#content #toc{border-style:solid;border-width:1px;border-color:#e0e0dc;margin-bottom:1.25em;padding:1.25em;background:#f8f8f7;-webkit-border-radius:4px;border-radius:4px}
+#content #toc>:first-child{margin-top:0}
+#content #toc>:last-child{margin-bottom:0}
+#footer{max-width:100%;background:rgba(0,0,0,.8);padding:1.25em}
+#footer-text{color:rgba(255,255,255,.8);line-height:1.44}
+#content{margin-bottom:.625em}
+.sect1{padding-bottom:.625em}
+@media screen and (min-width:768px){#content{margin-bottom:1.25em}
+.sect1{padding-bottom:1.25em}}
+.sect1:last-child{padding-bottom:0}
+.sect1+.sect1{border-top:1px solid #e7e7e9}
+#content h1>a.anchor,h2>a.anchor,h3>a.anchor,#toctitle>a.anchor,.sidebarblock>.content>.title>a.anchor,h4>a.anchor,h5>a.anchor,h6>a.anchor{position:absolute;z-index:1001;width:1.5ex;margin-left:-1.5ex;display:block;text-decoration:none!important;visibility:hidden;text-align:center;font-weight:400}
+#content h1>a.anchor::before,h2>a.anchor::before,h3>a.anchor::before,#toctitle>a.anchor::before,.sidebarblock>.content>.title>a.anchor::before,h4>a.anchor::before,h5>a.anchor::before,h6>a.anchor::before{content:"\00A7";font-size:.85em;display:block;padding-top:.1em}
+#content h1:hover>a.anchor,#content h1>a.anchor:hover,h2:hover>a.anchor,h2>a.anchor:hover,h3:hover>a.anchor,#toctitle:hover>a.anchor,.sidebarblock>.content>.title:hover>a.anchor,h3>a.anchor:hover,#toctitle>a.anchor:hover,.sidebarblock>.content>.title>a.anchor:hover,h4:hover>a.anchor,h4>a.anchor:hover,h5:hover>a.anchor,h5>a.anchor:hover,h6:hover>a.anchor,h6>a.anchor:hover{visibility:visible}
+#content h1>a.link,h2>a.link,h3>a.link,#toctitle>a.link,.sidebarblock>.content>.title>a.link,h4>a.link,h5>a.link,h6>a.link{color:#ba3925;text-decoration:none}
+#content h1>a.link:hover,h2>a.link:hover,h3>a.link:hover,#toctitle>a.link:hover,.sidebarblock>.content>.title>a.link:hover,h4>a.link:hover,h5>a.link:hover,h6>a.link:hover{color:#a53221}
+details,.audioblock,.imageblock,.literalblock,.listingblock,.stemblock,.videoblock{margin-bottom:1.25em}
+details>summary:first-of-type{cursor:pointer;display:list-item;outline:none;margin-bottom:.75em}
+.admonitionblock td.content>.title,.audioblock>.title,.exampleblock>.title,.imageblock>.title,.listingblock>.title,.literalblock>.title,.stemblock>.title,.openblock>.title,.paragraph>.title,.quoteblock>.title,table.tableblock>.title,.verseblock>.title,.videoblock>.title,.dlist>.title,.olist>.title,.ulist>.title,.qlist>.title,.hdlist>.title{text-rendering:optimizeLegibility;text-align:left;font-family:"Noto Serif","DejaVu Serif",serif;font-size:1rem;font-style:italic}
+table.tableblock.fit-content>caption.title{white-space:nowrap;width:0}
+.paragraph.lead>p,#preamble>.sectionbody>[class="paragraph"]:first-of-type p{font-size:1.21875em;line-height:1.6;color:rgba(0,0,0,.85)}
+table.tableblock #preamble>.sectionbody>[class="paragraph"]:first-of-type p{font-size:inherit}
+.admonitionblock>table{border-collapse:separate;border:0;background:none;width:100%}
+.admonitionblock>table td.icon{text-align:center;width:80px}
+.admonitionblock>table td.icon img{max-width:none}
+.admonitionblock>table td.icon .title{font-weight:bold;font-family:"Open Sans","DejaVu Sans",sans-serif;text-transform:uppercase}
+.admonitionblock>table td.content{padding-left:1.125em;padding-right:1.25em;border-left:1px solid #dddddf;color:rgba(0,0,0,.6)}
+.admonitionblock>table td.content>:last-child>:last-child{margin-bottom:0}
+.exampleblock>.content{border-style:solid;border-width:1px;border-color:#e6e6e6;margin-bottom:1.25em;padding:1.25em;background:#fff;-webkit-border-radius:4px;border-radius:4px}
+.exampleblock>.content>:first-child{margin-top:0}
+.exampleblock>.content>:last-child{margin-bottom:0}
+.sidebarblock{border-style:solid;border-width:1px;border-color:#dbdbd6;margin-bottom:1.25em;padding:1.25em;background:#f3f3f2;-webkit-border-radius:4px;border-radius:4px}
+.sidebarblock>:first-child{margin-top:0}
+.sidebarblock>:last-child{margin-bottom:0}
+.sidebarblock>.content>.title{color:#7a2518;margin-top:0;text-align:center}
+.exampleblock>.content>:last-child>:last-child,.exampleblock>.content .olist>ol>li:last-child>:last-child,.exampleblock>.content .ulist>ul>li:last-child>:last-child,.exampleblock>.content .qlist>ol>li:last-child>:last-child,.sidebarblock>.content>:last-child>:last-child,.sidebarblock>.content .olist>ol>li:last-child>:last-child,.sidebarblock>.content .ulist>ul>li:last-child>:last-child,.sidebarblock>.content .qlist>ol>li:last-child>:last-child{margin-bottom:0}
+.literalblock pre,.listingblock>.content>pre{-webkit-border-radius:4px;border-radius:4px;word-wrap:break-word;overflow-x:auto;padding:1em;font-size:.8125em}
+@media screen and (min-width:768px){.literalblock pre,.listingblock>.content>pre{font-size:.90625em}}
+@media screen and (min-width:1280px){.literalblock pre,.listingblock>.content>pre{font-size:1em}}
+.literalblock pre,.listingblock>.content>pre:not(.highlight),.listingblock>.content>pre[class="highlight"],.listingblock>.content>pre[class^="highlight "]{background:#f7f7f8}
+.literalblock.output pre{color:#f7f7f8;background:rgba(0,0,0,.9)}
+.listingblock>.content{position:relative}
+.listingblock code[data-lang]::before{display:none;content:attr(data-lang);position:absolute;font-size:.75em;top:.425rem;right:.5rem;line-height:1;text-transform:uppercase;color:inherit;opacity:.5}
+.listingblock:hover code[data-lang]::before{display:block}
+.listingblock.terminal pre .command::before{content:attr(data-prompt);padding-right:.5em;color:inherit;opacity:.5}
+.listingblock.terminal pre .command:not([data-prompt])::before{content:"$"}
+.listingblock pre.highlightjs{padding:0}
+.listingblock pre.highlightjs>code{padding:1em;-webkit-border-radius:4px;border-radius:4px}
+.listingblock pre.prettyprint{border-width:0}
+.prettyprint{background:#f7f7f8}
+pre.prettyprint .linenums{line-height:1.45;margin-left:2em}
+pre.prettyprint li{background:none;list-style-type:inherit;padding-left:0}
+pre.prettyprint li code[data-lang]::before{opacity:1}
+pre.prettyprint li:not(:first-child) code[data-lang]::before{display:none}
+table.linenotable{border-collapse:separate;border:0;margin-bottom:0;background:none}
+table.linenotable td[class]{color:inherit;vertical-align:top;padding:0;line-height:inherit;white-space:normal}
+table.linenotable td.code{padding-left:.75em}
+table.linenotable td.linenos{border-right:1px solid currentColor;opacity:.35;padding-right:.5em}
+pre.pygments .lineno{border-right:1px solid currentColor;opacity:.35;display:inline-block;margin-right:.75em}
+pre.pygments .lineno::before{content:"";margin-right:-.125em}
+.quoteblock{margin:0 1em 1.25em 1.5em;display:table}
+.quoteblock:not(.excerpt)>.title{margin-left:-1.5em;margin-bottom:.75em}
+.quoteblock blockquote,.quoteblock p{color:rgba(0,0,0,.85);font-size:1.15rem;line-height:1.75;word-spacing:.1em;letter-spacing:0;font-style:italic;text-align:justify}
+.quoteblock blockquote{margin:0;padding:0;border:0}
+.quoteblock blockquote::before{content:"\201c";float:left;font-size:2.75em;font-weight:bold;line-height:.6em;margin-left:-.6em;color:#7a2518;text-shadow:0 1px 2px rgba(0,0,0,.1)}
+.quoteblock blockquote>.paragraph:last-child p{margin-bottom:0}
+.quoteblock .attribution{margin-top:.75em;margin-right:.5ex;text-align:right}
+.verseblock{margin:0 1em 1.25em}
+.verseblock pre{font-family:"Open Sans","DejaVu Sans",sans;font-size:1.15rem;color:rgba(0,0,0,.85);font-weight:300;text-rendering:optimizeLegibility}
+.verseblock pre strong{font-weight:400}
+.verseblock .attribution{margin-top:1.25rem;margin-left:.5ex}
+.quoteblock .attribution,.verseblock .attribution{font-size:.9375em;line-height:1.45;font-style:italic}
+.quoteblock .attribution br,.verseblock .attribution br{display:none}
+.quoteblock .attribution cite,.verseblock .attribution cite{display:block;letter-spacing:-.025em;color:rgba(0,0,0,.6)}
+.quoteblock.abstract blockquote::before,.quoteblock.excerpt blockquote::before,.quoteblock .quoteblock blockquote::before{display:none}
+.quoteblock.abstract blockquote,.quoteblock.abstract p,.quoteblock.excerpt blockquote,.quoteblock.excerpt p,.quoteblock .quoteblock blockquote,.quoteblock .quoteblock p{line-height:1.6;word-spacing:0}
+.quoteblock.abstract{margin:0 1em 1.25em;display:block}
+.quoteblock.abstract>.title{margin:0 0 .375em;font-size:1.15em;text-align:center}
+.quoteblock.excerpt>blockquote,.quoteblock .quoteblock{padding:0 0 .25em 1em;border-left:.25em solid #dddddf}
+.quoteblock.excerpt,.quoteblock .quoteblock{margin-left:0}
+.quoteblock.excerpt blockquote,.quoteblock.excerpt p,.quoteblock .quoteblock blockquote,.quoteblock .quoteblock p{color:inherit;font-size:1.0625rem}
+.quoteblock.excerpt .attribution,.quoteblock .quoteblock .attribution{color:inherit;text-align:left;margin-right:0}
+table.tableblock{max-width:100%;border-collapse:separate}
+p.tableblock:last-child{margin-bottom:0}
+td.tableblock>.content>:last-child{margin-bottom:-1.25em}
+td.tableblock>.content>:last-child.sidebarblock{margin-bottom:0}
+table.tableblock,th.tableblock,td.tableblock{border:0 solid #dedede}
+table.grid-all>thead>tr>.tableblock,table.grid-all>tbody>tr>.tableblock{border-width:0 1px 1px 0}
+table.grid-all>tfoot>tr>.tableblock{border-width:1px 1px 0 0}
+table.grid-cols>*>tr>.tableblock{border-width:0 1px 0 0}
+table.grid-rows>thead>tr>.tableblock,table.grid-rows>tbody>tr>.tableblock{border-width:0 0 1px}
+table.grid-rows>tfoot>tr>.tableblock{border-width:1px 0 0}
+table.grid-all>*>tr>.tableblock:last-child,table.grid-cols>*>tr>.tableblock:last-child{border-right-width:0}
+table.grid-all>tbody>tr:last-child>.tableblock,table.grid-all>thead:last-child>tr>.tableblock,table.grid-rows>tbody>tr:last-child>.tableblock,table.grid-rows>thead:last-child>tr>.tableblock{border-bottom-width:0}
+table.frame-all{border-width:1px}
+table.frame-sides{border-width:0 1px}
+table.frame-topbot,table.frame-ends{border-width:1px 0}
+table.stripes-all tr,table.stripes-odd tr:nth-of-type(odd),table.stripes-even tr:nth-of-type(even),table.stripes-hover tr:hover{background:#f8f8f7}
+th.halign-left,td.halign-left{text-align:left}
+th.halign-right,td.halign-right{text-align:right}
+th.halign-center,td.halign-center{text-align:center}
+th.valign-top,td.valign-top{vertical-align:top}
+th.valign-bottom,td.valign-bottom{vertical-align:bottom}
+th.valign-middle,td.valign-middle{vertical-align:middle}
+table thead th,table tfoot th{font-weight:bold}
+tbody tr th{display:table-cell;line-height:1.6;background:#f7f8f7}
+tbody tr th,tbody tr th p,tfoot tr th,tfoot tr th p{color:rgba(0,0,0,.8);font-weight:bold}
+p.tableblock>code:only-child{background:none;padding:0}
+p.tableblock{font-size:1em}
+ol{margin-left:1.75em}
+ul li ol{margin-left:1.5em}
+dl dd{margin-left:1.125em}
+dl dd:last-child,dl dd:last-child>:last-child{margin-bottom:0}
+ol>li p,ul>li p,ul dd,ol dd,.olist .olist,.ulist .ulist,.ulist .olist,.olist .ulist{margin-bottom:.625em}
+ul.checklist,ul.none,ol.none,ul.no-bullet,ol.no-bullet,ol.unnumbered,ul.unstyled,ol.unstyled{list-style-type:none}
+ul.no-bullet,ol.no-bullet,ol.unnumbered{margin-left:.625em}
+ul.unstyled,ol.unstyled{margin-left:0}
+ul.checklist{margin-left:.625em}
+ul.checklist li>p:first-child>.fa-square-o:first-child,ul.checklist li>p:first-child>.fa-check-square-o:first-child{width:1.25em;font-size:.8em;position:relative;bottom:.125em}
+ul.checklist li>p:first-child>input[type="checkbox"]:first-child{margin-right:.25em}
+ul.inline{display:-ms-flexbox;display:-webkit-box;display:flex;-ms-flex-flow:row wrap;-webkit-flex-flow:row wrap;flex-flow:row wrap;list-style:none;margin:0 0 .625em -1.25em}
+ul.inline>li{margin-left:1.25em}
+.unstyled dl dt{font-weight:400;font-style:normal}
+ol.arabic{list-style-type:decimal}
+ol.decimal{list-style-type:decimal-leading-zero}
+ol.loweralpha{list-style-type:lower-alpha}
+ol.upperalpha{list-style-type:upper-alpha}
+ol.lowerroman{list-style-type:lower-roman}
+ol.upperroman{list-style-type:upper-roman}
+ol.lowergreek{list-style-type:lower-greek}
+.hdlist>table,.colist>table{border:0;background:none}
+.hdlist>table>tbody>tr,.colist>table>tbody>tr{background:none}
+td.hdlist1,td.hdlist2{vertical-align:top;padding:0 .625em}
+td.hdlist1{font-weight:bold;padding-bottom:1.25em}
+.literalblock+.colist,.listingblock+.colist{margin-top:-.5em}
+.colist td:not([class]):first-child{padding:.4em .75em 0;line-height:1;vertical-align:top}
+.colist td:not([class]):first-child img{max-width:none}
+.colist td:not([class]):last-child{padding:.25em 0}
+.thumb,.th{line-height:0;display:inline-block;border:solid 4px #fff;-webkit-box-shadow:0 0 0 1px #ddd;box-shadow:0 0 0 1px #ddd}
+.imageblock.left{margin:.25em .625em 1.25em 0}
+.imageblock.right{margin:.25em 0 1.25em .625em}
+.imageblock>.title{margin-bottom:0}
+.imageblock.thumb,.imageblock.th{border-width:6px}
+.imageblock.thumb>.title,.imageblock.th>.title{padding:0 .125em}
+.image.left,.image.right{margin-top:.25em;margin-bottom:.25em;display:inline-block;line-height:0}
+.image.left{margin-right:.625em}
+.image.right{margin-left:.625em}
+a.image{text-decoration:none;display:inline-block}
+a.image object{pointer-events:none}
+sup.footnote,sup.footnoteref{font-size:.875em;position:static;vertical-align:super}
+sup.footnote a,sup.footnoteref a{text-decoration:none}
+sup.footnote a:active,sup.footnoteref a:active{text-decoration:underline}
+#footnotes{padding-top:.75em;padding-bottom:.75em;margin-bottom:.625em}
+#footnotes hr{width:20%;min-width:6.25em;margin:-.25em 0 .75em;border-width:1px 0 0}
+#footnotes .footnote{padding:0 .375em 0 .225em;line-height:1.3334;font-size:.875em;margin-left:1.2em;margin-bottom:.2em}
+#footnotes .footnote a:first-of-type{font-weight:bold;text-decoration:none;margin-left:-1.05em}
+#footnotes .footnote:last-of-type{margin-bottom:0}
+#content #footnotes{margin-top:-.625em;margin-bottom:0;padding:.75em 0}
+.gist .file-data>table{border:0;background:#fff;width:100%;margin-bottom:0}
+.gist .file-data>table td.line-data{width:99%}
+div.unbreakable{page-break-inside:avoid}
+.big{font-size:larger}
+.small{font-size:smaller}
+.underline{text-decoration:underline}
+.overline{text-decoration:overline}
+.line-through{text-decoration:line-through}
+.aqua{color:#00bfbf}
+.aqua-background{background:#00fafa}
+.black{color:#000}
+.black-background{background:#000}
+.blue{color:#0000bf}
+.blue-background{background:#0000fa}
+.fuchsia{color:#bf00bf}
+.fuchsia-background{background:#fa00fa}
+.gray{color:#606060}
+.gray-background{background:#7d7d7d}
+.green{color:#006000}
+.green-background{background:#007d00}
+.lime{color:#00bf00}
+.lime-background{background:#00fa00}
+.maroon{color:#600000}
+.maroon-background{background:#7d0000}
+.navy{color:#000060}
+.navy-background{background:#00007d}
+.olive{color:#606000}
+.olive-background{background:#7d7d00}
+.purple{color:#600060}
+.purple-background{background:#7d007d}
+.red{color:#bf0000}
+.red-background{background:#fa0000}
+.silver{color:#909090}
+.silver-background{background:#bcbcbc}
+.teal{color:#006060}
+.teal-background{background:#007d7d}
+.white{color:#bfbfbf}
+.white-background{background:#fafafa}
+.yellow{color:#bfbf00}
+.yellow-background{background:#fafa00}
+span.icon>.fa{cursor:default}
+a span.icon>.fa{cursor:inherit}
+.admonitionblock td.icon [class^="fa icon-"]{font-size:2.5em;text-shadow:1px 1px 2px rgba(0,0,0,.5);cursor:default}
+.admonitionblock td.icon .icon-note::before{content:"\f05a";color:#19407c}
+.admonitionblock td.icon .icon-tip::before{content:"\f0eb";text-shadow:1px 1px 2px rgba(155,155,0,.8);color:#111}
+.admonitionblock td.icon .icon-warning::before{content:"\f071";color:#bf6900}
+.admonitionblock td.icon .icon-caution::before{content:"\f06d";color:#bf3400}
+.admonitionblock td.icon .icon-important::before{content:"\f06a";color:#bf0000}
+.conum[data-value]{display:inline-block;color:#fff!important;background:rgba(0,0,0,.8);-webkit-border-radius:100px;border-radius:100px;text-align:center;font-size:.75em;width:1.67em;height:1.67em;line-height:1.67em;font-family:"Open Sans","DejaVu Sans",sans-serif;font-style:normal;font-weight:bold}
+.conum[data-value] *{color:#fff!important}
+.conum[data-value]+b{display:none}
+.conum[data-value]::after{content:attr(data-value)}
+pre .conum[data-value]{position:relative;top:-.125em}
+b.conum *{color:inherit!important}
+.conum:not([data-value]):empty{display:none}
+dt,th.tableblock,td.content,div.footnote{text-rendering:optimizeLegibility}
+h1,h2,p,td.content,span.alt{letter-spacing:-.01em}
+p strong,td.content strong,div.footnote strong{letter-spacing:-.005em}
+p,blockquote,dt,td.content,span.alt{font-size:1.0625rem}
+p{margin-bottom:1.25rem}
+.sidebarblock p,.sidebarblock dt,.sidebarblock td.content,p.tableblock{font-size:1em}
+.exampleblock>.content{background:#fffef7;border-color:#e0e0dc;-webkit-box-shadow:0 1px 4px #e0e0dc;box-shadow:0 1px 4px #e0e0dc}
+.print-only{display:none!important}
+@page{margin:1.25cm .75cm}
+@media print{*{-webkit-box-shadow:none!important;box-shadow:none!important;text-shadow:none!important}
+html{font-size:80%}
+a{color:inherit!important;text-decoration:underline!important}
+a.bare,a[href^="#"],a[href^="mailto:"]{text-decoration:none!important}
+a[href^="http:"]:not(.bare)::after,a[href^="https:"]:not(.bare)::after{content:"(" attr(href) ")";display:inline-block;font-size:.875em;padding-left:.25em}
+abbr[title]::after{content:" (" attr(title) ")"}
+pre,blockquote,tr,img,object,svg{page-break-inside:avoid}
+thead{display:table-header-group}
+svg{max-width:100%}
+p,blockquote,dt,td.content{font-size:1em;orphans:3;widows:3}
+h2,h3,#toctitle,.sidebarblock>.content>.title{page-break-after:avoid}
+#toc,.sidebarblock,.exampleblock>.content{background:none!important}
+#toc{border-bottom:1px solid #dddddf!important;padding-bottom:0!important}
+body.book #header{text-align:center}
+body.book #header>h1:first-child{border:0!important;margin:2.5em 0 1em}
+body.book #header .details{border:0!important;display:block;padding:0!important}
+body.book #header .details span:first-child{margin-left:0!important}
+body.book #header .details br{display:block}
+body.book #header .details br+span::before{content:none!important}
+body.book #toc{border:0!important;text-align:left!important;padding:0!important;margin:0!important}
+body.book #toc,body.book #preamble,body.book h1.sect0,body.book .sect1>h2{page-break-before:always}
+.listingblock code[data-lang]::before{display:block}
+#footer{padding:0 .9375em}
+.hide-on-print{display:none!important}
+.print-only{display:block!important}
+.hide-for-print{display:none!important}
+.show-for-print{display:inherit!important}}
+@media print,amzn-kf8{#header>h1:first-child{margin-top:1.25rem}
+.sect1{padding:0!important}
+.sect1+.sect1{border:0}
+#footer{background:none}
+#footer-text{color:rgba(0,0,0,.6);font-size:.9em}}
+@media amzn-kf8{#header,#content,#footnotes,#footer{padding:0}}
+
diff --git a/web/META-INF/daten/www/dok/wbx/bedienung.html b/web/META-INF/daten/www/dok/wbx/bedienung.html
new file mode 100644
index 0000000..227bd83
--- /dev/null
+++ b/web/META-INF/daten/www/dok/wbx/bedienung.html
@@ -0,0 +1,496 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta http-equiv="X-UA-Compatible" content="IE=edge">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<meta name="generator" content="Asciidoctor 2.0.10">
+<meta name="author" content="Ulrich Hilger">
+<title>WebBox Bedienung</title>
+<link rel="stylesheet" href="asciidoctor.css">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+</head>
+<body class="article toc2 toc-left">
+<div id="header">
+<h1>WebBox Bedienung</h1>
+<div class="details">
+<span id="author" class="author">Ulrich Hilger</span><br>
+<span id="email" class="email"><a href="mailto:ulrich.hilger@web.de">ulrich.hilger@web.de</a></span><br>
+<span id="revnumber">version 3.1,</span>
+<span id="revdate">24. Januar 2021</span>
+</div>
+<div id="toc" class="toc2">
+<div id="toctitle">Inhalt</div>
+<ul class="sectlevel1">
+<li><a href="#wbx-ueber">1. Über die WebBox</a>
+<ul class="sectlevel2">
+<li><a href="#wbx-abgrenzung">1.1. Zielgruppe</a></li>
+<li><a href="#wbx-lizenz">1.2. Lizenz</a></li>
+</ul>
+</li>
+<li><a href="#wbx-bedienung">2. Bedienung</a>
+<ul class="sectlevel2">
+<li><a href="#wbx-aufrufen">2.1. WebBox aufrufen</a></li>
+<li><a href="#wbx-file-cms">2.2. Dateien bearbeiten</a></li>
+<li><a href="#_texteditor">2.3. Texteditor</a></li>
+<li><a href="#_speichern">2.4. Speichern</a></li>
+<li><a href="#wbx-dok-edit">2.5. Textdokumente bearbeiten</a></li>
+<li><a href="#wbx-ordner-verwalten">2.6. Ordner</a></li>
+<li><a href="#wbx-neuer-reiter">2.7. Neuer Reiter</a></li>
+<li><a href="#wbx-packen">2.8. Ordner packen</a></li>
+<li><a href="#wbx-entpacken">2.9. Archiv entpacken</a></li>
+<li><a href="#_sichtbarkeit_von_inhalten">2.10. Sichtbarkeit von Inhalten</a></li>
+<li><a href="#wbx-inhalte-ansehen">2.11. Inhalte ansehen</a></li>
+<li><a href="#_inhalte_hochladen">2.12. Inhalte hochladen</a></li>
+<li><a href="#_bilder">2.13. Bilder</a></li>
+<li><a href="#wbx-webdav">2.14. WebDAV verwenden</a></li>
+<li><a href="#wbx-prod">2.15. Produktive Nutzung</a></li>
+</ul>
+</li>
+<li><a href="#_dokumenthistorie">3. Dokumenthistorie</a></li>
+</ul>
+</div>
+</div>
+<div id="content">
+<div id="preamble">
+<div class="sectionbody">
+<div class="imageblock">
+<div class="content">
+<img src="bilder/File-Server-icon.png" alt="WebBox">
+</div>
+</div>
+<div class="paragraph">
+<p>Das Internet ist als Verbindung von Netzknoten konzipiert, die Inhalte bereit stellen. Die WebBox etabliert einen solchen Netzknoten als persönliche Instanz eines Nutzers und ermöglicht es, eigene Inhalte über das Netz zu verwalten und zu teilen.</p>
+</div>
+</div>
+</div>
+<div class="sect1">
+<h2 id="wbx-ueber"><a class="anchor" href="#wbx-ueber"></a>1. Über die WebBox</h2>
+<div class="sectionbody">
+<div class="paragraph">
+<p>Mit der WebBox können Inhalte so verwaltet werden, wie es Nutzer vom Desktop handelsüblicher Betriebssyteme her kennen. Zur Bedienung wird nicht mehr als ein Browser benötigt. Von überallher können Texte und Dokumente bearbeitet, Bilder, Musik oder Videos organisiert, kopiert, verschoben oder herauf- und heruntergeladen werden.</p>
+</div>
+<div class="paragraph">
+<p>Die Kopie in einen öffentlichen Ordner genügt und Inhalte erscheinen für jedermann sichtbar im Netz. Der Rest bleibt im privaten Bereich nur für den Nutzer zugänglich, dem sie gehören. Rollen und Berechtigungen können über die Nutzerverwaltung verwaltet werden.</p>
+</div>
+<div class="paragraph">
+<p>Die WebBox etabliert zudem ein relationales Datenbankmanagementsystem und lässt sich mit Java-Webanwendungen beliebig erweitern.</p>
+</div>
+<div class="sect2">
+<h3 id="wbx-abgrenzung"><a class="anchor" href="#wbx-abgrenzung"></a>1.1. Zielgruppe</h3>
+<div class="paragraph">
+<p>Die Beschreibung in diesem Dokument beschränkt sich auf eine Nutzung mit Linux. Eine WebBox läuft darüber hinaus auch auf anderen Betriebssystemen wie Mac OS oder Windows.</p>
+</div>
+<div class="paragraph">
+<p>Die WebBox ist mit dem Einsatz für einzelne Personen, Familien, oder kleine Arbeitsgruppen im Sinn entstanden. Sie funktioniert unverändert auch für eine größere Anzahl an Benutzern, allerdings ist ein großer Nutzerkreis eher etwas für das Zusammenspiel vieler WebBoxen.</p>
+</div>
+<div class="paragraph">
+<p>Ein Betrieb vieler WebBoxen aus einer Hand erfordert zusätzliche Konfiguration für Cluster, weitere Infrastruktur und deren Orchestrierung. Der Betrieb in einem solchen Szenario ist möglich, aber in diesem Dokument nicht abgedeckt.</p>
+</div>
+</div>
+<div class="sect2">
+<h3 id="wbx-lizenz"><a class="anchor" href="#wbx-lizenz"></a>1.2. Lizenz</h3>
+<div class="paragraph">
+<p>Die WebBox wird unter den Bedingungen der <a href="https://www.gnu.org/licenses/agpl-3.0.de.html">GNU Affero General Public License</a> bereitgestellt.</p>
+</div>
+</div>
+</div>
+</div>
+<div class="sect1">
+<h2 id="wbx-bedienung"><a class="anchor" href="#wbx-bedienung"></a>2. Bedienung</h2>
+<div class="sectionbody">
+<div class="paragraph">
+<p>In diesem Dokument ist die Bedienung einer WebBox beschrieben. Das Dokument <a href="einrichtung.html">Einrichtung</a> enthält darüber hinaus Informationen zu <a href="einrichtung.html#wbx-inst">Installation</a> und <a href="einrichtung.html#wbx-eigenbau">eigener Konfiguration</a>.</p>
+</div>
+<div class="sect2">
+<h3 id="wbx-aufrufen"><a class="anchor" href="#wbx-aufrufen"></a>2.1. WebBox aufrufen</h3>
+<div class="paragraph">
+<p>Wird nach dem <a href="einrichtung.html#wbx-start-stopp">Start der WebBox</a> im Webbrowser der URL <a href="http://localhost:8089/" class="bare">http://localhost:8089/</a> aufgerufen, erscheint die Startseite der WebBox.</p>
+</div>
+<div id="wbx-startseite" class="imageblock">
+<div class="content">
+<img src="bilder/wbx-firefox.png" alt="wbx-browser">
+</div>
+<div class="title">Abb. 1. die Startseite der WebBox</div>
+</div>
+<div class="paragraph">
+<p>Für die WebBox ist der Port <code>8089</code> voreingestellt, er kann geändert werden wie in der <a href="einrichtung.html#wbx-port">Konfigurationsanleitung</a> beschrieben. Die Standard-Begrüßungsseite kann durch eigene Inhalte ersetzt werden, indem diese Inhalte im Verzeichnis der <a href="einrichtung.html#wbx-root-app">WebBox Root App</a> abgelegt werden.</p>
+</div>
+</div>
+<div class="sect2">
+<h3 id="wbx-file-cms"><a class="anchor" href="#wbx-file-cms"></a>2.2. Dateien bearbeiten</h3>
+<div class="paragraph">
+<p>Die WebBox ist mit einer Dateiverwaltung ausgestattet, mit der <a href="https://de.wikipedia.org/wiki/Datei">Dateien</a> erstellt und deren Inhalte bearbeitet werden können. Die Dateiverwaltung der WebBox wird über den Punkt <code>Dateiverwaltung</code> des Menüs oben rechts auf der <a href="#wbx-startseite">Startseite der WebBox</a> aufgerufen.</p>
+</div>
+<div class="paragraph">
+<p>Beim Aufruf erscheint zunächst die Anmeldeseite. Nutzer benötigen die <a href="#wbx-admin-aendern">Rolle</a> <code>ownFileAdmin</code>, um die Dateiverwaltung benutzen zu können. Mit erfolgreicher Anmeldung erscheint die Dateiverwaltung.</p>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="bilder/dateiverwaltung.png" alt="img-wbx-file-cms">
+</div>
+<div class="title">Abb. 2. Die Dateiverwaltung der WebBox</div>
+</div>
+<div class="paragraph">
+<p>Klick auf das Symbol mit den drei waagerechten Linien oben links öffnet das Menü ("Hamburger-Menü"). Erneutes Anklicken des Symbols schließt das Menü.</p>
+</div>
+<div class="sect3">
+<h4 id="_auswählen_und_öffnen"><a class="anchor" href="#_auswählen_und_öffnen"></a>2.2.1. Auswählen und öffnen</h4>
+<div class="paragraph">
+<p>Das Anklicken eines Elements in der Dateiverwaltung wählt dieses aus. Das Anklicken eines gewählten Elements öffnet es.</p>
+</div>
+<div class="paragraph">
+<p>Beim Öffnen verwendet die Dateiverwaltung die Dateiendungen, um zu bestimmen, wie eine Datei geöffnet wird. Dateien mit der Endung <code>.txt</code> werden beispielsweise im Texteditor geöffnet.</p>
+</div>
+</div>
+</div>
+<div class="sect2">
+<h3 id="_texteditor"><a class="anchor" href="#_texteditor"></a>2.3. Texteditor</h3>
+<div class="paragraph">
+<p>Mit Doppelklick auf den Ordner <code>Persoenlich</code> wird dessen Inhalt angezeigt, anfangs ist dieser leer. Auswahl des Punkts <code>Neuer Text…​</code> im Menü oder Klick auf die Schaltfläche mit dem Dokumentsymbol oben rechts öffnet eine neue, leere Textdatei im Texteditor.</p>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="bilder/texteditor.png" alt="img-wbx-txt-editor">
+</div>
+<div class="title">Abb. 3. der Texteditor der WebBox</div>
+</div>
+<div class="paragraph">
+<p>Hier kann nun beliebiger Textinhalt eingetragen werden. Auswahl des Punkts <code>Speichern</code> oder <code>Speichern unter..</code> im Menü fragt einen Namen für die neue Datei ab.</p>
+</div>
+</div>
+<div class="sect2">
+<h3 id="_speichern"><a class="anchor" href="#_speichern"></a>2.4. Speichern</h3>
+<div class="imageblock">
+<div class="content">
+<img src="bilder/speichern-unter.png" alt="img-wbx-file-save-as">
+</div>
+<div class="title">Abb. 4. der Dialog <em>Datei speichern unter</em></div>
+</div>
+<div class="paragraph">
+<p>Mit Betätigen der Schaltfläche <code>Speichern</code> wird die neue Textdatei unter dem eingetragenen Namen in dem Ordner gespeichert, von dem aus der Texteditor gestartet wurde, in diesem Fall also im Ordner <code>Persoenlich</code>. Die Auswahl <code>Schließen</code> aus dem Menü oder Klick auf die Schaltfläche mit dem "X" oben rechts schließt den Texteditor und es wird wieder der Inhalt des Ordners <code>Persoenlich</code> angezeigt. Dort ist jetzt die neu angelegte Datei dargestellt.</p>
+</div>
+</div>
+<div class="sect2">
+<h3 id="wbx-dok-edit"><a class="anchor" href="#wbx-dok-edit"></a>2.5. Textdokumente bearbeiten</h3>
+<div class="paragraph">
+<p>Mit der Dateiverwaltung lassen sich auch Textdokumente schreiben und bearbeiten. Die Vorgehensweise ist genauso wie im vorigen Abschnitt für Textdateien beschrieben. Für Textdokumente wird <code>Neues Dokument</code> aus dem Menü gewählt, woraufhin sich der Dokumenteditor der Dateiverwaltung öffnet.</p>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="bilder/dokeditor.png" alt="img-wbx-dok-editor">
+</div>
+<div class="title">Abb. 5. Der Dokumenteditor der WebBox</div>
+</div>
+<div class="paragraph">
+<p>Hier kann ein Textdokument mit Formatierungen direkt im Browser erstellt und bearbeitet werden, wie man es von üblichen Textverarbeitungen gewohnt ist. Das Speichern oder Bearbeiten erfolgt wie im vorigen Abschnitt beschrieben. Textdokumente werden dabei als reines HTML gespeichert, der Autor benötigt keine HTML-Kenntnisse für das Schreiben oder Bearbeiten. Die Dokumente sind so bestens für die Verwendung im Netz geeignet.</p>
+</div>
+<div class="paragraph">
+<p><strong>Wichtig:</strong> Textdokumente müssen mit der Endung <code>.htmi</code> gespeichert werden, damit die WebBox sie als solche erkennen kann.</p>
+</div>
+<div class="sect3">
+<h4 id="_textdokumente_und_html_seiten"><a class="anchor" href="#_textdokumente_und_html_seiten"></a>2.5.1. Textdokumente und HTML-Seiten</h4>
+<div class="paragraph">
+<p>Ein Textdokument, wie es mit der WebBox erstellt werden kann, ist einer HTML-Seite ähnlich. Es beinhaltet aber nur den Teil einer HTML-Seite, der im Element <code>body</code> untergebracht ist. Zu vollwertigen HTML-Seiten fehlt den Textdokumenten der WebBox die Gesamtstruktur mit dem Kopf-Teil, dem HTML-Element <code>head</code>.</p>
+</div>
+<div class="paragraph">
+<p>Werden Textdokumente der WebBox mit der Funktion <a href="#wbx-inhalte-ansehen">Inhalte ansehen</a> dargestellt, also über ihren URL aufgerufen, gibt die WebBox das Textdokument wie eine HTML-Seite aus. Mangels Angaben im Kopf der Seite verwendet der Webbrowser Standardeinstellungen für die Gestaltung des Dokuments. Die Darstellung kann deshalb von Browser zu Browser unterschiedlich ausfallen.</p>
+</div>
+<div class="paragraph">
+<p>Wird beim Speichern des Textdokuments die Endung <code>.htmi</code> im Namen angegeben, bettet die WebBox den Inhalt des Textdokuments in eine komplette HTML-Struktur bestehend aus <code>head</code>- und <code>body</code>-Element ein und fügt Verweise auf Gestaltungsvorlagen hinzu (CSS-Stylesheets). Als Gestaltungsvorlage wird das der WebBox beiliegende Stylesheet von Bootstrap <code>$WBX-INST/apps/jslib/bootstrap/css/bootstrap.min.css</code> sowie die Datei <code>stile.css</code> eingebettet. Ist im Ordner, in dem das betreffende Textdokument abgelegt ist, eine Datei <code>stile.css</code> abgelegt, können dem Textdokumente auf diese Weise eigene Gestaltungsvorgaben mitgegeben werden.</p>
+</div>
+</div>
+<div class="sect3">
+<h4 id="_textdokumente_als_html_exportieren"><a class="anchor" href="#_textdokumente_als_html_exportieren"></a>2.5.2. Textdokumente als HTML exportieren</h4>
+<div class="paragraph">
+<p>Um ein Textdokument, das mit der WebBox erstellt wurde, auch ohne eine WebBox einfach im Browser ansehen zu können, muss es als HTML-Seite vorliegen. Mit dem Punkt <code>Export HTML</code> im Menü können alle Textdokumente mit Endung <code>.htmi</code> des aktuell geöffneten Ordners als HTML-Seiten erzeugt werden.</p>
+</div>
+<div class="paragraph">
+<p>Die so erzeugten HTML-Seiten werden in einen Ordner gelegt, der so heißt wie der aktuell geöffnete Ordner nebst Zusatz <code>_html</code>. Der neue Ordner liegt nach dem HTML-Export in dem Ordner, in dem der aktuell geöffnete Ordner liegt.</p>
+</div>
+</div>
+</div>
+<div class="sect2">
+<h3 id="wbx-ordner-verwalten"><a class="anchor" href="#wbx-ordner-verwalten"></a>2.6. Ordner</h3>
+<div class="paragraph">
+<p>Mit dem Punkt <code>Neuer Ordner</code> des Menüs oder Klick auf die Schaltfläche mit dem Ordnersymbol oben rechts wird im gerade angezeigten Ordner ein neuer Ordner erstellt. Nach Eingabe eines Ordner-Namens wird der neue Ordner im aktuell geöffneten Ordner angelegt. Ordner und deren Inhalte können mit den Optionen im Menü <code>Bearbeiten</code> verschoben, kopiert oder gelöscht werden. Hierzu werden folgende Schritte ausgeführt</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic">
+<li>
+<p>Inhalt (Ordner oder Datei) durch Anklicken auswählen,</p>
+</li>
+<li>
+<p>Menü <code>Bearbeiten</code> - <code>Kopieren</code> oder <code>Ausschneiden</code> wählen,</p>
+</li>
+<li>
+<p>in den Ordner navigieren, in den der ausgewählte Inhalt verschoben oder kopiert werden soll und</p>
+</li>
+<li>
+<p>Menü <code>Bearbeiten</code> - <code>Einfügen</code> wählen.</p>
+</li>
+</ol>
+</div>
+<div class="paragraph">
+<p>Die gewählten Inhalte werden kopiert bzw. verschoben und befinden sich anschließend am gewählten Ort. Zur Auswahl mehrerer Dateien oder Ordner muss beim Anklicken jedes Elements einer Mehrfachauswahl die <code>Strg</code>-Taste festgehalten werden.</p>
+</div>
+</div>
+<div class="sect2">
+<h3 id="wbx-neuer-reiter"><a class="anchor" href="#wbx-neuer-reiter"></a>2.7. Neuer Reiter</h3>
+<div class="paragraph">
+<p>Mit dem Punkt <code>Neuer Reiter</code> des Menüs wird der gerade geöffnete <a href="#wbx-ordner-verwalten">Ordner</a> in einem neuen Aktenreiter (Tab) des Browsers geöffnet. Browser ohne Unterstützung der Darstellung mehrerer Tabs öffnen den Ordner in einem neuen Fenster.</p>
+</div>
+<div class="paragraph">
+<p>Gegebenenfalls muss in der Konfiguration des Browsers das Öffnen neuer Tabs oder Fenster für die WebBox erlaubt werden. In diesem Fall wird vom Browser beim Aufruf des Punkts <code>Neuer Reiter</code> die Erlaubnis vom Benutzer abgefragt.</p>
+</div>
+<div class="paragraph">
+<p>Der Uniform Resource Locator (URL) eines so geöffneten Ordners der WebBox erscheint in der Adresszeile des Browsers. Er kann als Lesezeichen zum direkten Aufruf des Ordners genutzt werden.</p>
+</div>
+</div>
+<div class="sect2">
+<h3 id="wbx-packen"><a class="anchor" href="#wbx-packen"></a>2.8. Ordner packen</h3>
+<div class="paragraph">
+<p>Der Inhalt des gerade geöffneten Ordners kann mit dem Punkt <code>Sonstiges</code> → <code>Ordner packen</code> in ein ZIP-Archiv überführt werden. Das ZIP-Archiv heißt so wie der Ordner und liegt anschließend in dem Ordner, der den gepackten Ordner enthält, also eine Ordnerebene höher.</p>
+</div>
+<div class="paragraph">
+<p>Wird beispielsweise der Ordner namens <code>Testordner</code> im Pfad <code>Persoenlich/meine-Daten/Texte</code> geöffnet und auf diese Weise gepackt, liegt anschließend eine ZIP-Datei namens <code>Testordner.zip</code> im Ordner <code>Persoenlich/meine-Daten/Texte</code>.</p>
+</div>
+<div class="paragraph">
+<p>Wird die ZIP-Datei ausgewählt (angeklickt) und der Punkt <code>Ansehen</code> im Menü gewählt, wird die ZIP-Datei heruntergeladen.</p>
+</div>
+</div>
+<div class="sect2">
+<h3 id="wbx-entpacken"><a class="anchor" href="#wbx-entpacken"></a>2.9. Archiv entpacken</h3>
+<div class="paragraph">
+<p>Ein ZIP-Archiv wird mit dem Punkt <code>Entpacken</code> im Menü <code>Sonstiges</code> entpackt. Der Inhalt wird direkt in den Ordner entpackt, in dem die ZIP-Datei liegt. Es muss vor dem Entpacken ein neuer Ordner angelegt und die ZIP-Datei dorthin verschoben werden, wenn der Inhalt des ZIP-Archivs nicht mit anderen Inhalten vermischt werden soll.</p>
+</div>
+</div>
+<div class="sect2">
+<h3 id="_sichtbarkeit_von_inhalten"><a class="anchor" href="#_sichtbarkeit_von_inhalten"></a>2.10. Sichtbarkeit von Inhalten</h3>
+<div class="paragraph">
+<p>Die WebBox unterscheidet für jeden Benutzer einen öffentlichen und einen nicht öffentlichen, persönlichen Bereich. Im öffentlichen Bereich befindliche Inhalte sind ohne Einschränkung sichtbar. Inhalte im persönlichen Bereich sind nur für den angemeldeten Benutzer sichtbar. Jeder angemeldete Benutzer sieht dabei im persönlichen Bereich nur seine eigenen Inhalte. Beide Bereiche sind mit einem eigenen Uniform Resource Locator (URL) zugänglich:</p>
+</div>
+<div class="paragraph">
+<p><code>http://localhost:8089/<strong>home</strong>/[benutzername]/</code> (persönliche Inhalte)</p>
+</div>
+<div class="paragraph">
+<p><code>http://localhost:8089/<strong>data</strong>/[benutzername]/</code> (öffentliche Inhalte)</p>
+</div>
+<div class="paragraph">
+<p>Die URLs für persönliche und öffentliche Inhalte, wie sie oben beschrieben sind, geben dabei Inhalte aus den Ordnern <code>Persoenlich</code> und <code>Oeffentlich</code> der WebBox wieder. Deren Inhalt wird erstellt und verwaltet wie in den folgenden Kapiteln beschrieben.</p>
+</div>
+</div>
+<div class="sect2">
+<h3 id="wbx-inhalte-ansehen"><a class="anchor" href="#wbx-inhalte-ansehen"></a>2.11. Inhalte ansehen</h3>
+<div class="paragraph">
+<p>Über den Menüpunkt <code>Ansehen</code> wird der Inhalt einer gerade gewählten Datei im Browser angezeigt. Auf diese Weise lässt sich auch der Uniform Resource Locator (URL) bestimmen, mit dem die Datei im Browser direkt aufgerufen werden kann. Es werden so nur Inhalte dargestellt, die im Browser angesehen werden können, z.B. Texte, HTML-Dateien, PDF, Bilder, Videos, usw.</p>
+</div>
+<div class="paragraph">
+<p>Dateien mit nicht darstellbaren Formaten wie z.B. ZIP-Dateien oder Office-Dateien (Microsoft, OpenOffice, LibreOffice) werden heruntergeladen.</p>
+</div>
+</div>
+<div class="sect2">
+<h3 id="_inhalte_hochladen"><a class="anchor" href="#_inhalte_hochladen"></a>2.12. Inhalte hochladen</h3>
+<div class="paragraph">
+<p>Lokale Inhalte werden zur WebBox übertragen und im aktuell geöffneten <a href="#wbx-ordner-verwalten">Ordner</a> abgelegt, wenn sie per Ziehen und Ablegen (Drag and Drop) im gerade geöffneten Ordner der <a href="#wbx-file-cms">Dateiverwaltung</a> 'fallengelassen' werden.</p>
+</div>
+<div class="paragraph">
+<p>Einzelne und mehrere gleichzeitig ausgewählte Dateien können so direkt an die WebBox übertragen werden. Sollen ganze Ordner übertragen werden, müssen diese zuvor als ZIP-Datei gepackt und können nach dem Hochladen mit der WebBox <a href="#wbx-entpacken">entpackt</a> werden.</p>
+</div>
+</div>
+<div class="sect2">
+<h3 id="_bilder"><a class="anchor" href="#_bilder"></a>2.13. Bilder</h3>
+<div class="paragraph">
+<p>Werden Bilder des Typs <code>JPEG</code>, <code>PNG</code> oder <code>GIF</code> auf die WebBox übertragen, übernimmt die WebBox automatisch das Verkleinern des Originals zu gebräuchlichen anderen Formaten.</p>
+</div>
+<div class="paragraph">
+<p>Auf diese Weise müssen nicht die unter Umständen großen Datenmengen des Originalbildes für eine Miniatur-Vorschau übertragen werden. Die so erzeugte Miniaturansicht erscheint für Bilder auch anstelle eines Dateisymbols. Neben der Miniaturansicht lassen sich die folgenden weiteren Bildgrößen erzeugen:</p>
+</div>
+<table class="tableblock frame-all grid-all stretch">
+<caption class="title">Tabelle 1. Bildgrößen und -endungen</caption>
+<colgroup>
+<col style="width: 50%;">
+<col style="width: 50%;">
+</colgroup>
+<thead>
+<tr>
+<th class="tableblock halign-center valign-top">Größe (px)</th>
+<th class="tableblock halign-center valign-top">Endung</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td class="tableblock halign-center valign-top"><p class="tableblock">120</p></td>
+<td class="tableblock halign-center valign-top"><p class="tableblock">_tn</p></td>
+</tr>
+<tr>
+<td class="tableblock halign-center valign-top"><p class="tableblock">240</p></td>
+<td class="tableblock halign-center valign-top"><p class="tableblock">_kl</p></td>
+</tr>
+<tr>
+<td class="tableblock halign-center valign-top"><p class="tableblock">500</p></td>
+<td class="tableblock halign-center valign-top"><p class="tableblock">_dd</p></td>
+</tr>
+<tr>
+<td class="tableblock halign-center valign-top"><p class="tableblock">700</p></td>
+<td class="tableblock halign-center valign-top"><p class="tableblock">_mt</p></td>
+</tr>
+<tr>
+<td class="tableblock halign-center valign-top"><p class="tableblock">1200</p></td>
+<td class="tableblock halign-center valign-top"><p class="tableblock">_gr</p></td>
+</tr>
+</tbody>
+</table>
+<div class="paragraph">
+<p>Dem Namen der Originaldatei eines Bildes wird einfach die Endung der gewünschten Größe angehängt um anstelle des Bildes in Originalgröße die gewünschte Größe aufzurufen. Ohne Endung wird das Bild in Originalgröße ausgegeben.</p>
+</div>
+<div class="paragraph">
+<p>Ist beispielsweise eine Bilddatei <code>MeinBild.png</code> im Ordner <code>Persoenlich/Bilder</code> des Nutzers <code>fred</code> abgelegt, kann ihre Minituransicht mit folgendem URL angesehen werden:</p>
+</div>
+<div class="paragraph">
+<p><code>http://localhost:8098/home/fred/Bilder/MeinBild_tn.png</code></p>
+</div>
+<div class="paragraph">
+<p>Bilder können mit Hilfe des <a href="#wbx-dok-edit">Dokumenteditors</a> in Dokumente eingebunden werden. Vom Ablageort des betreffenden Dokuments ausgehend genügt eine relative Pfadangabe. Zum Beispiel könnte ein Dokument im Ordner <code>Persoenlich</code> des Nutzers <code>fred</code> das oben erwähnte Bild mit der relativen Angabe <code>Bilder/MeinBild.png</code> einbinden.</p>
+</div>
+<div class="sect3">
+<h4 id="_bilder_betrachten"><a class="anchor" href="#_bilder_betrachten"></a>2.13.1. Bilder betrachten</h4>
+<div class="paragraph">
+<p>Ein Bild kann angesehen werden wie in Kapitel <a href="#wbx-inhalte-ansehen">Inhalte ansehen</a> beschrieben. Zudem kann im Menü <code>Sonstiges</code> die Funktion <code>Diashow</code> aufgerufen werden. Damit öffnet sich ein neuer Aktenreiter (Tab) im Browser, der die im aktuellen Ordner befindlichen Bilder als Diashow anzeigt.</p>
+</div>
+<div class="paragraph">
+<p>Die zuvor erwähnte Diashow-Funktion kann auch direkt auf Ordner der Dateiverwaltung der WebBox angewendet werden. Dazu wird die Diashow-Funktion zunächst eingeschaltet, indem der Punkt <code>Diashow einschalten</code> im Menü <code>Sonstiges</code> gewählt wird. Damit wird die standardmäßig ausgeschaltete Diashow-Funktion aktiviert. Anschließend wird ein Ordner geöffnet, der Bilder enthält. Mit Klick auf eines der Bilder wird die Diashow direkt aus dem Ordner heraus gestartet.</p>
+</div>
+<div class="paragraph">
+<p>Sollen Bilder wieder als Dateien in der <a href="#wbx-file-cms">Dateiverwaltung</a> behandelt werden, beispielweise zum Markieren oder Kopieren einzelner Bilddateien, wird die Funktion <code>Diashow ausschalten</code> im Menü gewählt. Damit wird die Diashow-Funktion ausgeschaltet.</p>
+</div>
+</div>
+<div class="sect3">
+<h4 id="_bilder_öffentlich_zugänglich_machen"><a class="anchor" href="#_bilder_öffentlich_zugänglich_machen"></a>2.13.2. Bilder öffentlich zugänglich machen</h4>
+<div class="paragraph">
+<p>Die Diashow-Funktion der WebBox läßt sich auch aus der öffentlichen Ablage heraus verwenden. Es genügt, einen Ordner mit Bilddateien in den Ordner <code>Oeffentlich</code> zu legen um die betreffenden Bilder mit allen zu teilen, die den Namen des Ordners kennen. Der URL zur Diashow ergibt sich aus der Adressleiste des Browsers mit Aufruf der Funktion <code>Diashow</code> aus dem Menü <code>Sonstiges</code>.</p>
+</div>
+<div class="sect4">
+<h5 id="_beispiel"><a class="anchor" href="#_beispiel"></a>Beispiel</h5>
+<div class="paragraph">
+<p>Ein Ordner mit Bilddateien namens <code>1234567</code> liegt im Ordner <code>Oeffentlich/bilder</code> des Benutzers <code>fred</code>. Diese Bilder können dann über den folgenden URL als Diashow betrachtet werden</p>
+</div>
+<div class="paragraph">
+<p><code>http://localhost:8089/file-cms/fotos/?o=fred/bilder/1234567</code></p>
+</div>
+<div class="paragraph">
+<p>Kombiniert mit der <a href="#wbx-webdav">WebDAV-Funktion</a> können z.B. Fotos vom Mobilgerät in wenigen Schritten zentral zugänglich gemacht werden.</p>
+</div>
+</div>
+</div>
+</div>
+<div class="sect2">
+<h3 id="wbx-webdav"><a class="anchor" href="#wbx-webdav"></a>2.14. WebDAV verwenden</h3>
+<div class="paragraph">
+<p><a href="https://de.wikipedia.org/wiki/WebDAV">WebDAV</a> ist ein Standardprotokoll für die Verwaltung von Dateien über HTTP oder HTTPS. Es gibt viele Dateiverwaltungs-Apps, die WebDAV unterstützen, beispielsweise auch für iOS oder Android. Mit solchen Programmen ist es sehr einfach, z.B. Fotos vom Mobilgerät auf die WebBox zu übertragen.</p>
+</div>
+<div class="paragraph">
+<p>Über folgende URLs kann per WebDAV auf die WebBox zugegriffen werden.</p>
+</div>
+<div class="paragraph">
+<p><code>http://localhost:8089/dav</code></p>
+</div>
+<div class="paragraph">
+<p><code>dav://localhost:8089/dav</code></p>
+</div>
+<div class="paragraph">
+<p>Ist die WebBox für den produktiven Betrieb <a href="einrichtung.html#wbx-sichern">abgesichert</a>, beginnen die URLs mit <code>https</code> und <code>davs</code>. Die URLs verweisen auf den Ordner <code>$WBX-INST/data/dav</code> der WebBox. Inhalte dieses Ordners erscheinen im Ordner <code>Austausch</code> der <a href="#wbx-file-cms">Dateiverwaltung</a>, der auf der obersten Ebene der Ablagestruktur zusammen mit den Ordnern <code>Persönlich</code> und <code>Öffentlich</code> zu sehen ist.</p>
+</div>
+<div class="paragraph">
+<p>Wird mit einem WebDAV-fähigen Programm einer der obigen URLs aufgerufen, wird eine Authentifizierung abgefragt. Nur Benutzer der WebBox mit der <a href="einrichtung.html#wbx-admin-aendern">Rolle</a> <code>davNutzer</code> können sich dort anmelden.</p>
+</div>
+<div class="sect3">
+<h4 id="_austausch"><a class="anchor" href="#_austausch"></a>2.14.1. Austausch</h4>
+<div class="paragraph">
+<p>Per WebDAV zugängliche Inhalte, wie sie im vorigen Abschnitt beschrieben sind, erscheinen im Ordner <code>Austausch</code> auf der obersten Ordnerebene. Sie können dort von jedem Benutzer der WebBox eingesehen werden.</p>
+</div>
+<div class="paragraph">
+<p>Die Inhalte können von dort mit den Punkten <code>Ausschneiden</code> und <code>Einfügen</code> des Menüs <code>Bearbeiten</code> zu einem Ablageort, der dem gerade angemeldeten Benutzers gehört, verschoben, also in die Ordner <code>Oeffentlich</code> oder <code>Persoenlich</code> des jeweiligen Benutzers abgelegt werden.</p>
+</div>
+</div>
+</div>
+<div class="sect2">
+<h3 id="wbx-prod"><a class="anchor" href="#wbx-prod"></a>2.15. Produktive Nutzung</h3>
+<div class="paragraph">
+<p>Ist eine WebBox abgesichert, wie in der <a href="einrichtung.html#wbx-sichern">Installationsanleitung</a> beschrieben, kann sie von überallher verwendet werden. Wir gehen für die weitere Beschreibung hier einmal von der Betriebsart hinter einem Proxy aus.</p>
+</div>
+<div class="paragraph">
+<p>Zur Erreichbarkeit 'von außen' ist mindestens die Kenntnis der <a href="https://de.wikipedia.org/wiki/IP-Adresse">IP-Adresse</a> des <a href="https://de.wikipedia.org/wiki/Router">Routers</a> zum Internt erforderlich, hinter dem die WebBox läuft. Besser ist es aber, bei einem entsprechenden Anbieter eine <a href="https://de.wikipedia.org/wiki/Domain_(Internet)">Domain</a> wie etwa <code>example.com</code> zu <a href="https://de.wikipedia.org/wiki/Domain-Registrierung">registrieren</a> und diese auf die IP-Adresse des Routers verweisen zu lassen. Für wechselnde IP-Adressen, wie sie bei heimischen Internet-Anschlüssen vorkommen, kann ein Anbieter für <a href="https://de.wikipedia.org/wiki/Dynamisches_DNS">dynamisches DNS</a> eingeschaltet werden.</p>
+</div>
+<div class="paragraph">
+<p>Sind Domain und dynamisches DNS geschaltet, muss im Router der Port 443 für die Kommunikation über <a href="https://de.wikipedia.org/wiki/Hypertext_Transfer_Protocol_Secure">HTTPS</a> geöffnet und eine Weiterleitung dieser Anfragen an den Proxy geschaltet werden.</p>
+</div>
+</div>
+</div>
+</div>
+<div class="sect1">
+<h2 id="_dokumenthistorie"><a class="anchor" href="#_dokumenthistorie"></a>3. Dokumenthistorie</h2>
+<div class="sectionbody">
+<table class="tableblock frame-all grid-all stretch">
+<caption class="title">Tabelle 2. Änderungen</caption>
+<colgroup>
+<col style="width: 11.1111%;">
+<col style="width: 22.2222%;">
+<col style="width: 22.2222%;">
+<col style="width: 44.4445%;">
+</colgroup>
+<thead>
+<tr>
+<th class="tableblock halign-center valign-bottom">Nr</th>
+<th class="tableblock halign-left valign-bottom">Datum</th>
+<th class="tableblock halign-left valign-bottom">Autor</th>
+<th class="tableblock halign-left valign-bottom">Beschreibung</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td class="tableblock halign-center valign-bottom"><p class="tableblock">1</p></td>
+<td class="tableblock halign-left valign-bottom"><p class="tableblock">9. Mai 2020</p></td>
+<td class="tableblock halign-left valign-bottom"><p class="tableblock">Ulrich</p></td>
+<td class="tableblock halign-left valign-bottom"><p class="tableblock">Erste Anlage der Version 3 der WebBox</p></td>
+</tr>
+<tr>
+<td class="tableblock halign-center valign-bottom"><p class="tableblock">2</p></td>
+<td class="tableblock halign-left valign-bottom"><p class="tableblock">10. Januar 2021</p></td>
+<td class="tableblock halign-left valign-bottom"><p class="tableblock">Ulrich</p></td>
+<td class="tableblock halign-left valign-bottom"><p class="tableblock">Neue Dokumentation Version 3</p></td>
+</tr>
+<tr>
+<td class="tableblock halign-center valign-bottom"><p class="tableblock">3</p></td>
+<td class="tableblock halign-left valign-bottom"><p class="tableblock">16. Januar 2021</p></td>
+<td class="tableblock halign-left valign-bottom"><p class="tableblock">Ulrich</p></td>
+<td class="tableblock halign-left valign-bottom"><p class="tableblock">V3.1: Installation, Sicherung</p></td>
+</tr>
+<tr>
+<td class="tableblock halign-center valign-bottom"><p class="tableblock">4</p></td>
+<td class="tableblock halign-left valign-bottom"><p class="tableblock">22. Januar 2021</p></td>
+<td class="tableblock halign-left valign-bottom"><p class="tableblock">Ulrich</p></td>
+<td class="tableblock halign-left valign-bottom"><p class="tableblock">V3.1: Aufteilung der Dokumentation</p></td>
+</tr>
+<tr>
+<td class="tableblock halign-center valign-bottom"><p class="tableblock">5</p></td>
+<td class="tableblock halign-left valign-bottom"><p class="tableblock">24. Januar 2021</p></td>
+<td class="tableblock halign-left valign-bottom"><p class="tableblock">Ulrich</p></td>
+<td class="tableblock halign-left valign-bottom"><p class="tableblock">V3.1: Neue Bedienoberfläche beschrieben</p></td>
+</tr>
+</tbody>
+</table>
+</div>
+</div>
+</div>
+<div id="footer">
+<div id="footer-text">
+Version 3.1<br>
+Letzte Änderung 2021-01-24 13:53:00 +0100
+</div>
+</div>
+<link rel="stylesheet" href="/jslib/highlight-adoc/styles/github.min.css">
+<script src="/jslib/highlight-adoc/highlight.min.js"></script>
+<script>hljs.initHighlighting()</script>
+</body>
+</html>
diff --git a/web/META-INF/daten/www/dok/wbx/bilder/File-Server-icon.png b/web/META-INF/daten/www/dok/wbx/bilder/File-Server-icon.png
new file mode 100644
index 0000000..ad62b0b
--- /dev/null
+++ b/web/META-INF/daten/www/dok/wbx/bilder/File-Server-icon.png
Binary files differ
diff --git a/web/META-INF/daten/www/dok/wbx/bilder/dateiverwaltung.png b/web/META-INF/daten/www/dok/wbx/bilder/dateiverwaltung.png
new file mode 100644
index 0000000..44e2d30
--- /dev/null
+++ b/web/META-INF/daten/www/dok/wbx/bilder/dateiverwaltung.png
Binary files differ
diff --git a/web/META-INF/daten/www/dok/wbx/bilder/dokeditor.png b/web/META-INF/daten/www/dok/wbx/bilder/dokeditor.png
new file mode 100644
index 0000000..4cac641
--- /dev/null
+++ b/web/META-INF/daten/www/dok/wbx/bilder/dokeditor.png
Binary files differ
diff --git a/web/META-INF/daten/www/dok/wbx/bilder/speichern-unter.png b/web/META-INF/daten/www/dok/wbx/bilder/speichern-unter.png
new file mode 100644
index 0000000..7bb7c82
--- /dev/null
+++ b/web/META-INF/daten/www/dok/wbx/bilder/speichern-unter.png
Binary files differ
diff --git a/web/META-INF/daten/www/dok/wbx/bilder/texteditor.png b/web/META-INF/daten/www/dok/wbx/bilder/texteditor.png
new file mode 100644
index 0000000..318e49e
--- /dev/null
+++ b/web/META-INF/daten/www/dok/wbx/bilder/texteditor.png
Binary files differ
diff --git a/web/META-INF/daten/www/dok/wbx/bilder/wbx-3.png b/web/META-INF/daten/www/dok/wbx/bilder/wbx-3.png
new file mode 100644
index 0000000..89e98f1
--- /dev/null
+++ b/web/META-INF/daten/www/dok/wbx/bilder/wbx-3.png
Binary files differ
diff --git a/web/META-INF/daten/www/dok/wbx/bilder/wbx-4.png b/web/META-INF/daten/www/dok/wbx/bilder/wbx-4.png
new file mode 100644
index 0000000..abc95e9
--- /dev/null
+++ b/web/META-INF/daten/www/dok/wbx/bilder/wbx-4.png
Binary files differ
diff --git a/web/META-INF/daten/www/dok/wbx/bilder/wbx-firefox.png b/web/META-INF/daten/www/dok/wbx/bilder/wbx-firefox.png
new file mode 100644
index 0000000..37c91b4
--- /dev/null
+++ b/web/META-INF/daten/www/dok/wbx/bilder/wbx-firefox.png
Binary files differ
diff --git a/web/META-INF/daten/www/dok/wbx/einrichtung.html b/web/META-INF/daten/www/dok/wbx/einrichtung.html
new file mode 100644
index 0000000..44125ec
--- /dev/null
+++ b/web/META-INF/daten/www/dok/wbx/einrichtung.html
@@ -0,0 +1,737 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta http-equiv="X-UA-Compatible" content="IE=edge">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<meta name="generator" content="Asciidoctor 2.0.10">
+<meta name="author" content="Ulrich Hilger">
+<title>WebBox Einrichtung</title>
+<link rel="stylesheet" href="asciidoctor.css">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+</head>
+<body class="article toc2 toc-left">
+<div id="header">
+<h1>WebBox Einrichtung</h1>
+<div class="details">
+<span id="author" class="author">Ulrich Hilger</span><br>
+<span id="email" class="email"><a href="mailto:ulrich.hilger@web.de">ulrich.hilger@web.de</a></span><br>
+<span id="revnumber">version 3.1,</span>
+<span id="revdate">24. Januar 2021</span>
+</div>
+<div id="toc" class="toc2">
+<div id="toctitle">Inhalt</div>
+<ul class="sectlevel1">
+<li><a href="#wbx-ueber">1. Über die WebBox</a>
+<ul class="sectlevel2">
+<li><a href="#wbx-abgrenzung">1.1. Zielgruppe</a></li>
+<li><a href="#wbx-lizenz">1.2. Lizenz</a></li>
+</ul>
+</li>
+<li><a href="#wbx-inst">2. Installation</a>
+<ul class="sectlevel2">
+<li><a href="#wbx-sichern">2.1. WebBox sichern</a></li>
+<li><a href="#wbx-zielsystem">2.2. Zielsystem einstellen</a></li>
+</ul>
+</li>
+<li><a href="#wbx-start-stopp">3. Starten und Stoppen</a>
+<ul class="sectlevel2">
+<li><a href="#_starten">3.1. Starten</a></li>
+<li><a href="#_stoppen">3.2. Stoppen</a></li>
+<li><a href="#wbx-admin-aendern">3.3. Benutzer anlegen</a></li>
+</ul>
+</li>
+<li><a href="#wbx-bedienung">4. Bedienung</a></li>
+<li><a href="#wbx-eigenbau">5. Eigene Konfiguration</a>
+<ul class="sectlevel2">
+<li><a href="#wbx-dl">5.1. Beschaffung</a></li>
+<li><a href="#wbx-einrichten">5.2. Zusammenbau</a></li>
+<li><a href="#wbx-daten-apps">5.3. Daten und Apps</a></li>
+</ul>
+</li>
+<li><a href="#wbx-tech-info">6. Technische Infos</a>
+<ul class="sectlevel2">
+<li><a href="#wbx-struktur">6.1. Ordnerstruktur</a></li>
+<li><a href="#wbx-java-konf">6.2. Java</a></li>
+<li><a href="#wbx-tc-konf">6.3. Tomcat</a></li>
+<li><a href="#wbx-derby-konf">6.4. Derby</a></li>
+<li><a href="#wbx-konf-um">6.5. Nutzerverwaltung</a></li>
+<li><a href="#wbx-ablage">6.6. Datenablage</a></li>
+<li><a href="#wbx-root-app">6.7. WebBox Startseite</a></li>
+<li><a href="#wbx-konf-file-cms">6.8. Dateiverwaltung</a></li>
+<li><a href="#wbx-lib">6.9. WebBox Lib</a></li>
+<li><a href="#wbx-erweitern">6.10. WebBox erweitern</a></li>
+</ul>
+</li>
+<li><a href="#_dokumenthistorie">7. Dokumenthistorie</a></li>
+</ul>
+</div>
+</div>
+<div id="content">
+<div id="preamble">
+<div class="sectionbody">
+<div class="imageblock">
+<div class="content">
+<img src="bilder/File-Server-icon.png" alt="WebBox">
+</div>
+</div>
+<div class="paragraph">
+<p>Das Internet ist als Verbindung von Netzknoten konzipiert, die Inhalte bereit stellen. Die WebBox etabliert einen solchen Netzknoten als persönliche Instanz eines Nutzers und ermöglicht es, eigene Inhalte über das Netz zu verwalten und zu teilen.</p>
+</div>
+</div>
+</div>
+<div class="sect1">
+<h2 id="wbx-ueber"><a class="anchor" href="#wbx-ueber"></a>1. Über die WebBox</h2>
+<div class="sectionbody">
+<div class="paragraph">
+<p>Mit der WebBox können Inhalte so verwaltet werden, wie es Nutzer vom Desktop handelsüblicher Betriebssyteme her kennen. Zur Bedienung wird nicht mehr als ein Browser benötigt. Von überallher können Texte und Dokumente bearbeitet, Bilder, Musik oder Videos organisiert, kopiert, verschoben oder herauf- und heruntergeladen werden.</p>
+</div>
+<div class="paragraph">
+<p>Die Kopie in einen öffentlichen Ordner genügt und Inhalte erscheinen für jedermann sichtbar im Netz. Der Rest bleibt im privaten Bereich nur für den Nutzer zugänglich, dem sie gehören. Rollen und Berechtigungen können über die Nutzerverwaltung verwaltet werden.</p>
+</div>
+<div class="paragraph">
+<p>Die WebBox etabliert zudem ein relationales Datenbankmanagementsystem und lässt sich mit Java-Webanwendungen beliebig erweitern.</p>
+</div>
+<div class="sect2">
+<h3 id="wbx-abgrenzung"><a class="anchor" href="#wbx-abgrenzung"></a>1.1. Zielgruppe</h3>
+<div class="paragraph">
+<p>Die Beschreibung in diesem Dokument beschränkt sich auf eine Nutzung mit Linux. Eine WebBox läuft darüber hinaus auch auf anderen Betriebssystemen wie Mac OS oder Windows.</p>
+</div>
+<div class="paragraph">
+<p>Die WebBox ist mit dem Einsatz für einzelne Personen, Familien, oder kleine Arbeitsgruppen im Sinn entstanden. Sie funktioniert unverändert auch für eine größere Anzahl an Benutzern, allerdings ist ein großer Nutzerkreis eher etwas für das Zusammenspiel vieler WebBoxen.</p>
+</div>
+<div class="paragraph">
+<p>Ein Betrieb vieler WebBoxen aus einer Hand erfordert zusätzliche Konfiguration für Cluster, weitere Infrastruktur und deren Orchestrierung. Der Betrieb in einem solchen Szenario ist möglich, aber in diesem Dokument nicht abgedeckt.</p>
+</div>
+</div>
+<div class="sect2">
+<h3 id="wbx-lizenz"><a class="anchor" href="#wbx-lizenz"></a>1.2. Lizenz</h3>
+<div class="paragraph">
+<p>Die WebBox wird unter den Bedingungen der <a href="https://www.gnu.org/licenses/agpl-3.0.de.html">GNU Affero General Public License</a> bereitgestellt.</p>
+</div>
+</div>
+</div>
+</div>
+<div class="sect1">
+<h2 id="wbx-inst"><a class="anchor" href="#wbx-inst"></a>2. Installation</h2>
+<div class="sectionbody">
+<div class="paragraph">
+<p>Zur Installation einer WebBox werden eine Kommandozeile geöffnet und die folgenden Kommandos ausgeführt:</p>
+</div>
+<div class="listingblock">
+<div class="title">Kommandos zur Installation einer WebBox in ein beispielhaftes Benutzerverzeichnis <code>/home/fred</code></div>
+<div class="content">
+<pre class="highlightjs highlight"><code data-lang="Bash" class="language-Bash hljs"># ins Benutzerverzechnis wechseln
+cd /home/fred
+
+# das Installationsskript laden
+wget https://uhilger.de/data/pg/webbox/dl/make-wbx
+
+# das Skript ausführbar machen
+chmod ug+x make-wbx
+
+# die Teile der WebBox laden und zusammenstellen
+./make-wbx</code></pre>
+</div>
+</div>
+<div class="paragraph">
+<p>Es werden keine Eingriffe im System der Zielmaschine vorgenommen, alles beschränkt sich auf das Benutzerverzeichnis: Die obigen Kommandos legen im Ordner <code>/home/fred</code> einen neuen Ordner <code>wbx-inst</code> an, laden alle Bestandteile einer WebBox herunter und machen sie ausführbar. Über eine Internet-Verbindung mit 10 Mbit/s oder mehr dauert dieser Vorgang weniger als eine Minute.</p>
+</div>
+<div id="wbx-ordner" class="paragraph">
+<p>Die ausführbare Fassung der WebBox liegt anschließend im Ordner <code>/home/fred/wbx-inst/wbx</code>. Dieser Ordner wird im weiteren Verlauf dieses Dokuments <code>$WBX-INST</code> genannt, d.h., wenn im Dokument <code>$WBX-INST</code> erscheint, ist <code>/home/fred/wbx-inst/wbx</code> gemeint.</p>
+</div>
+<div class="paragraph">
+<p>Die WebBox kann nun genutzt werden, sollte aber nach dem ersten Ausprobieren für einen produktiven Betrieb <a href="#wbx-sichern">abgesichert</a> werden. Der Start der WebBox erfolgt wie in Kapitel <a href="#wbx-start-stopp">Starten und Stoppen</a> beschrieben. Abweichend vom Betrieb laut Installation kann die WebBox auch mit einer <a href="#wbx-eigenbau">eigenen Konfiguration</a> ausgeführt werden.</p>
+</div>
+<div class="sect2">
+<h3 id="wbx-sichern"><a class="anchor" href="#wbx-sichern"></a>2.1. WebBox sichern</h3>
+<div class="paragraph">
+<p>Die hier beschriebene Installation ist nur für Testzwecke geeignet. Um eine WebBox sicher <a href="bedienung.adoc#wbx-prod">produktiv zu benutzen</a>, sollte sie zusammen mit einem <a href="https://de.wikipedia.org/wiki/Proxy_(Rechnernetz)">Proxy</a> wie <a href="http://www.lighttpd.net/">Lighttpd</a> betrieben werden. Grob gesagt ist hierfür das Vorgehen wie folgt:</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic">
+<li>
+<p>Lighttpd installieren (auf <a href="https://wiki.ubuntuusers.de/lighttpd/">Ubuntu</a> z.B. mit <code>sudo apt-get install lighttpd</code>)</p>
+</li>
+<li>
+<p>Ein <a href="https://de.wikipedia.org/wiki/Transport_Layer_Security">TLS</a>-Zertifikat erzeugen, z.B. bei <a href="https://letsencrypt.org/">Let’s Encrypt</a></p>
+</li>
+<li>
+<p>Die verschlüsselte Kommunikation unter Verwendung des Zertifikats in der Konfiguration von Lighttpd <a href="https://redmine.lighttpd.net/projects/lighttpd/wiki/Docs_SSL">einrichten</a></p>
+</li>
+<li>
+<p>In der Konfiguration von Lighttpd eine Weiterleitung auf die WebBox <a href="https://redmine.lighttpd.net/projects/lighttpd/wiki/Docs_ModProxy">eintragen</a></p>
+</li>
+</ol>
+</div>
+<div class="paragraph">
+<p>Die Kommunikation erfolgt auf diese Weise verschlüsselt und ist abgesichert gegen das Mitlesen unbefugter Dritter.</p>
+</div>
+<div class="sect3">
+<h4 id="_verschlüsselung_ohne_proxy"><a class="anchor" href="#_verschlüsselung_ohne_proxy"></a>2.1.1. Verschlüsselung ohne Proxy</h4>
+<div class="paragraph">
+<p>Die WebBox kann auch ohne Proxy verschlüsselt kommunizieren. Für diese Variante ist eine <code>.keystore</code>-Datei im Verzeichnis <code>$WBX-INST/.conf/prg/tc-base/conf</code> erforderlich, in die das <a href="https://de.wikipedia.org/wiki/Transport_Layer_Security">TLS</a>-Zertifikat eingetragen wird. In der Datei <code>$WBX-INST/.conf/prg/tc-base/conf/server.xml</code> muss dann ein Konnektor für <a href="https://de.wikipedia.org/wiki/Hypertext_Transfer_Protocol_Secure">HTTPS</a> konfiguriert werden.</p>
+</div>
+<div class="paragraph">
+<p>Das Vorgehen hierfür ist z.B. im Beitrag <a href="https://uhilger.de/data/doc/2019/12/tomcat-mit-https.md">HTTPS bei Tomcat aktivieren</a> beschrieben.</p>
+</div>
+</div>
+</div>
+<div class="sect2">
+<h3 id="wbx-zielsystem"><a class="anchor" href="#wbx-zielsystem"></a>2.2. Zielsystem einstellen</h3>
+<div class="paragraph">
+<p>Das Installationsskript <code>make-wbx</code> ist im Auslieferungszustand für ein 64-Bit x86-Linux konfiguriert. Zur Verwendung auf Maschinen mit anderem Prozessor oder Betriebssystem muss der Uniform Resource Locator (URL) der passenden Java-Version ermittelt werden. Das kann z.B. bei <a href="https://www.azul.com/downloads/zulu-community">Azul</a> oder <a href="https://adoptopenjdk.net/">AdoptOpenJDK</a> geschehen.</p>
+</div>
+<div class="paragraph">
+<p>Der URL muss vor der Ausführung im Parameter <code>JAVA_URL</code> des Skripts <code>make-wbx</code> eingetragen werden.</p>
+</div>
+</div>
+</div>
+</div>
+<div class="sect1">
+<h2 id="wbx-start-stopp"><a class="anchor" href="#wbx-start-stopp"></a>3. Starten und Stoppen</h2>
+<div class="sectionbody">
+<div class="paragraph">
+<p>Die WebBox ist standardmäßig darauf eingerichtet, mit den <a href="#wbx-inst">installierten</a> Bestandteilen zu starten. Soll die Ablaufumgebung anders konfiguriert sein, muss vor dem ersten Start das Start- / Stoppskript der WebBox von Hand angepasst werden wie in <a href="#wbx-eigenbau">Eigene Konfiguration</a> beschrieben.</p>
+</div>
+<div class="sect2">
+<h3 id="_starten"><a class="anchor" href="#_starten"></a>3.1. Starten</h3>
+<div class="paragraph">
+<p>Zum Starten der WebBox wird eine Kommandozeile geöffnet, in den <a href="#wbx-ordner">Ordner der WebBox</a> navigiert und das Kommando zum Start gegeben:</p>
+</div>
+<div class="listingblock">
+<div class="content">
+<pre>cd /home/fred/wbx-inst/wbx
+./wbx start</pre>
+</div>
+</div>
+<div class="paragraph">
+<p>Auf der Kommandozeile erscheint die Meldung <code>WebBox Startsequenz durchgeführt</code>, die WebBox kann <a href="bedienung.adoc#wbx-aufrufen">im Browser aufgerufen werden</a>. Vor der ersten Verwendung müssen noch <a href="#wbx-admin-aendern">Benutzer angelegt</a> werden.</p>
+</div>
+</div>
+<div class="sect2">
+<h3 id="_stoppen"><a class="anchor" href="#_stoppen"></a>3.2. Stoppen</h3>
+<div class="paragraph">
+<p>Das Stoppen der WebBox erfolgt mit folgenden Befehlen auf der Kommandozeile:</p>
+</div>
+<div class="listingblock">
+<div class="content">
+<pre>cd /home/fred/wbx-inst/wbx
+./wbx stop</pre>
+</div>
+</div>
+<div class="paragraph">
+<p>Die WebBox wird heruntergefahren, auf der Kommandozeile erscheint die Meldung <code>WebBox Stoppsequenz durchgeführt</code>.</p>
+</div>
+</div>
+<div class="sect2">
+<h3 id="wbx-admin-aendern"><a class="anchor" href="#wbx-admin-aendern"></a>3.3. Benutzer anlegen</h3>
+<div class="paragraph">
+<p>Beim ersten Start der WebBox wird automatisch der Benutzer <code>admin</code> mit Kennwort <code>admin</code> erstellt. Dieser Nutzer sollte gleich als Erstes verwendet werden, um einen anderen Benutzer mit Administrationsrechten anzulegen. Der neue Administrator-Benutzer muss mindestens die Rolle <code>nutzerAdmin</code> erhalten.</p>
+</div>
+<div class="paragraph">
+<p>Die dazu erforderliche Nutzerverwaltung wird auf der <a href="bedienung.adoc#wbx-startseite">Startseite</a> der WebBox über das Menü oben rechts aufgerufen. Die Bedienung der Nutzerverwaltung ist in der <a href="https://uhilger.de/data/pg/Nutzerverwaltung/anleitung.adoc#_nutzerverwaltung">Anleitung</a> beschrieben.</p>
+</div>
+<div class="paragraph">
+<p>Sobald nach der Konfiguration die Anmeldung mit dem neu angelegten Adminstrator-Benutzer gelingt, kann später der Benutzer <code>admin</code> gelöscht werden.</p>
+</div>
+<div class="paragraph">
+<p>Zur Bedienung der <a href="bedienung.adoc#wbx-file-cms">Dateiverwaltung</a> benötigen Benutzer zudem die Rolle <code>ownFileAdmin</code>. Zum Ändern des eigenen Kennwortes kann Benutzern die Rolle <code>nutzerProfil</code> zugewiesen werden.</p>
+</div>
+</div>
+</div>
+</div>
+<div class="sect1">
+<h2 id="wbx-bedienung"><a class="anchor" href="#wbx-bedienung"></a>4. Bedienung</h2>
+<div class="sectionbody">
+<div class="paragraph">
+<p>Die Bedienung der WebBox ist in der <a href="bedienung.adoc">Bedienungsanleitung</a> beschrieben.</p>
+</div>
+</div>
+</div>
+<div class="sect1">
+<h2 id="wbx-eigenbau"><a class="anchor" href="#wbx-eigenbau"></a>5. Eigene Konfiguration</h2>
+<div class="sectionbody">
+<div class="paragraph">
+<p>Voraussetzungen für die Nutzung der WebBox sind das Installationspaket der WebBox sowie Java, Tomcat und Derby. Diese Bestandteile werden bei der <a href="#wbx-inst">Installation</a> geladen, sie können aber auch einzeln beschafft und zusammengebaut oder aus vorhandenen Beständen genutzt werden.</p>
+</div>
+<div class="paragraph">
+<p>Dies wird hier beispielhaft im Home-Verzeichnis des Benutzers ausgeführt. Auf einem Linux-System sind Benutzerverzeichnisse im Pfad <code>/home</code> angelegt, sie werden deshalb auch Home-Verzeichnis genannt. Das Home-Verzeichnis eines Benutzers namens <code>fred</code> ist zum Beispiel <code>/home/fred</code>.</p>
+</div>
+<div class="sect2">
+<h3 id="wbx-dl"><a class="anchor" href="#wbx-dl"></a>5.1. Beschaffung</h3>
+<div class="paragraph">
+<p>Alle Teile sind als Freie Software erhältlich. Die noch nicht auf der Zielmaschine vorhandenen Teile können von ihren Produktseiten im Internet heruntergeladen werden:</p>
+</div>
+<div class="ulist">
+<ul>
+<li>
+<p><a href="https://www.azul.com/downloads/zulu-community/">Java</a></p>
+</li>
+<li>
+<p><a href="https://tomcat.apache.org">Tomcat</a></p>
+</li>
+<li>
+<p><a href="https://dp.apache.org/derby">Derby</a></p>
+</li>
+<li>
+<p><a href="https://uhilger.de/data/pg/webbox/dl/wbx-3-dist.tar.xz">WebBox</a></p>
+</li>
+</ul>
+</div>
+<div class="paragraph">
+<p>Die heruntergeladenen Dateien finden sich anschließend je nach Konfiguration des Browsers üblicherweise in <code>/home/fred/Downloads</code>, je nach ausgewählter Version unter Namen wie etwa</p>
+</div>
+<div class="ulist">
+<ul>
+<li>
+<p>Java: <code>zulu11.43.55-ca-jre11.0.9.1-linux_x64.tar.gz</code></p>
+</li>
+<li>
+<p>Tomcat: <code>apache-tomcat-9.0.41.tar.gz</code></p>
+</li>
+<li>
+<p>Derby: <code>db-derby-10.15.2.0-bin.tar.gz</code></p>
+</li>
+<li>
+<p>WebBox: <code>wbx-3-dist.tar.xz</code></p>
+</li>
+</ul>
+</div>
+<div class="paragraph">
+<p>Diese Dateien werden wie folgt entpackt:</p>
+</div>
+<div class="listingblock">
+<div class="title">Kommandos zum Entpacken der Bestandteile einer WebBox</div>
+<div class="content">
+<pre class="highlightjs highlight"><code data-lang="Bash" class="language-Bash hljs">cd /home/fred
+mkdir -p wbx-inst/{java,tc,db,wbx}
+cd Downloads
+tar -xf zulu11.43.55-ca-jre11.0.9.1-linux_x64.tar.gz -C ../wbx-inst/java --strip 1
+tar -xf apache-tomcat-9.0.41.tar.gz -C ../wbx-inst/tc --strip 1
+tar -xf db-derby-10.15.2.0-bin.tar.gz -C ../wbx-inst/db --strip 1
+tar -xf wbx-3-dist.tar.xz -C ../wbx-inst/wbx --strip 1</code></pre>
+</div>
+</div>
+<div class="paragraph">
+<p>Damit sind die benötigten Programme bereit zur Verwendung. Der Ordner <code>/home/fred/wbx-inst/wbx</code> wird für den Rest dieses Dokuments <code>$WBX-INST</code> genannt. Im nächsten Abschnitt ist beschrieben, wie die WebBox zur Nutzung konfiguriert wird.</p>
+</div>
+</div>
+<div class="sect2">
+<h3 id="wbx-einrichten"><a class="anchor" href="#wbx-einrichten"></a>5.2. Zusammenbau</h3>
+<div class="paragraph">
+<p>Die WebBox ist standardmäßig so eingerichtet, wie es in <a href="#wbx-inst">Installation</a> und <a href="#wbx-prg-buendeln">Programme bündeln</a> beschrieben ist. Die von der WebBox benötigten Programme <a href="#wbx-eigenbau">Java, Tomcat und Derby</a> können aber auch anders eingebunden werden.</p>
+</div>
+<div class="sect3">
+<h4 id="wbx-vorinst"><a class="anchor" href="#wbx-vorinst"></a>5.2.1. Vorhandene Programme verwenden</h4>
+<div class="paragraph">
+<p>Sind <a href="#wbx-eigenbau">Java, Tomcat und Derby</a> bereits vor der Installation der WebBox auf der Maschine vorhanden, ist in der Regel bei deren Installation ein systemweiter Pfadeintrag für <code>JAVA_HOME</code>, <code>CATALINA_HOME</code> oder <code>DERBY_HOME</code> gemacht worden. In diesen Fällen können die so vorliegenden Programme von der WebBox mitgenutzt werden. Die Pfadangabe im Start- / Stoppskript der WebBox kann dann auskommentiert bleiben, wie es im Auslieferungszustand der WebBox enthalten ist.</p>
+</div>
+<div class="listingblock">
+<div class="title">Auslieferungszustand der WebBox: Die Ablageorte von Java, Tomcat und Derby sind auskommentiert</div>
+<div class="content">
+<pre class="highlightjs highlight"><code data-lang="Bash" class="language-Bash hljs"># export JAVA_HOME=
+# export CATALINA_HOME=
+# export DERBY_HOME=</code></pre>
+</div>
+</div>
+<div class="paragraph">
+<p>Diese Betriebsart entspricht der Anordnung gemäß folgendem Schaubild.</p>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="bilder/wbx-3.png" alt="WebBox">
+</div>
+<div class="title">Abb. 1. die WebBox mit vorhandenen Programmen</div>
+</div>
+<div class="sect4">
+<h5 id="_programme_von_anderer_stelle_einbinden"><a class="anchor" href="#_programme_von_anderer_stelle_einbinden"></a>Programme von anderer Stelle einbinden</h5>
+<div class="paragraph">
+<p>Sollen Teile der für die WebBox erforderlichen Ablaufumgebung anders eingebunden sein, müssen die Pfade zu <a href="#wbx-eigenbau">Java, Tomcat und Derby</a> im Start- und Stoppskript, der Datei <code>$WBX-INST/wbx</code>, eingetragen werden wie im folgenden Beispiel.</p>
+</div>
+<div class="listingblock">
+<div class="title">Beispiel für die Angabe individueller Ablageorte von Java, Tomcat und Derby</div>
+<div class="content">
+<pre class="highlightjs highlight"><code data-lang="Bash" class="language-Bash hljs">export JAVA_HOME=/home/fred/wbx-inst/java
+export CATALINA_HOME=/home/fred/wbx-inst/tc
+export DERBY_HOME=/home/fred/wbx-inst/db</code></pre>
+</div>
+</div>
+</div>
+</div>
+<div class="sect3">
+<h4 id="wbx-prg-buendeln"><a class="anchor" href="#wbx-prg-buendeln"></a>5.2.2. Programme bündeln</h4>
+<div class="paragraph">
+<p>Eine weitere Variante ist es, <a href="#wbx-eigenbau">Java, Tomcat und Derby</a> in den Ordner der WebBox zu kopieren und mit der WebBox zu bündeln. Die dafür vorgesehenen Ordner sind</p>
+</div>
+<div class="ulist">
+<ul>
+<li>
+<p><code>$WBX-INST/.conf/prg/java</code></p>
+</li>
+<li>
+<p><code>$WBX-INST/.conf/prg/tc-home</code> (nur <code>CATLAINA_HOME/bin</code> und <code>CATLAINA_HOME/lib</code>)</p>
+</li>
+<li>
+<p><code>$WBX-INST/.conf/prg/derby</code> (nur <code>lib</code>)</p>
+</li>
+</ul>
+</div>
+<div class="paragraph">
+<p>Werden Java, Tomcat und Derby in die obigen Ordner der WebBox kopiert, kann das Start- / Stoppskript der WebBox im Auslieferungszustand belassen werden, mit auskommentierten Pfadangaben wie in <a href="#wbx-vorinst">Vorhandene Programme verwenden</a>. Die Nutzung der WebBox kann dann mit allen Bestandteilen aus einem Ordner heraus erfolgen wie im folgenden Schaubild.</p>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="bilder/wbx-4.png" alt="WebBox">
+</div>
+<div class="title">Abb. 2. die WebBox mit gebündelten Programmen</div>
+</div>
+<div class="paragraph">
+<p>In dieser Variante lässt sich die WebBox mit allen Bestandteilen und Daten einfach transportieren. Es muss stets nur der WebBox-Ordner kopiert werden.</p>
+</div>
+</div>
+</div>
+<div class="sect2">
+<h3 id="wbx-daten-apps"><a class="anchor" href="#wbx-daten-apps"></a>5.3. Daten und Apps</h3>
+<div class="paragraph">
+<p>Die Ablageorte für Daten und Apps sind standardmäßig auf die Ordner <code>$WBX-INST/data</code> und <code>$WBX-INST/apps</code> festgelegt. Sie können auf einen beliebigen anderen Ort umgestellt werden, indem im Start- und Stoppskript, der Datei <code>$WBX-INST/wbx</code>, die Einträge der Umgebungsvariablen <code>WBX_DATA</code> und <code>WBX_APPS</code> entsprechend geändert werden.</p>
+</div>
+<div class="paragraph">
+<p>Diese Angaben werden zudem als Java-Systemvariablen <code>wbx.data</code> und <code>wbx.apps</code> an <a href="#wbx-eigenbau">Tomcat</a> weitergereicht. Auf diese Weise können sie 'von außen' auch dem Java-Prozess von Tomcat und allen Webapps übermittelt werden. Ein auf der WebBox laufendes Java-Programm kann die Pfade zu den Daten und Apps der WebBox mit <code>System.getProperty("wbx.data")</code> und <code>System.getProperty("wbx.apps")</code> ermitteln.</p>
+</div>
+</div>
+</div>
+</div>
+<div class="sect1">
+<h2 id="wbx-tech-info"><a class="anchor" href="#wbx-tech-info"></a>6. Technische Infos</h2>
+<div class="sectionbody">
+<div class="paragraph">
+<p>Die WebBox kombiniert die folgendenden Einzelkomponenten zu einer ausführbaren Einheit.</p>
+</div>
+<div class="ulist">
+<ul>
+<li>
+<p>Java (Virtuelle Maschine und Ablaufumgebung)</p>
+</li>
+<li>
+<p>Tomcat (Web- und Applikationsserver)</p>
+</li>
+<li>
+<p>Derby (relationales Datenbanksystem)</p>
+</li>
+<li>
+<p>WebBox Konfiguration</p>
+<div class="ulist">
+<ul>
+<li>
+<p>Nutzerverwaltung</p>
+<div class="ulist none">
+<ul class="none">
+<li>
+<p>Nutzerdatenbank</p>
+</li>
+</ul>
+</div>
+</li>
+<li>
+<p>Dateiverwaltung</p>
+</li>
+<li>
+<p>Datenablage</p>
+</li>
+<li>
+<p>Root App</p>
+</li>
+<li>
+<p>WebBox Lib</p>
+</li>
+</ul>
+</div>
+</li>
+</ul>
+</div>
+<div class="paragraph">
+<p>Die Konfiguration dieser Komponenten ist nachfolgend beschrieben.</p>
+</div>
+<div class="sect2">
+<h3 id="wbx-struktur"><a class="anchor" href="#wbx-struktur"></a>6.1. Ordnerstruktur</h3>
+<div class="paragraph">
+<p>Eine WebBox besitzt die folgende Struktur.</p>
+</div>
+<div class="listingblock">
+<div class="content">
+<pre>wbx ............... eine WebBox
+
+ apps ............ Webanwendungen der WebBox-Nutzer
+ ROOT .......... Startseite der WebBox
+ jslib ......... zentrale JavaScript-Bibliotheken
+ fonts ......... zentrale Schriftarten
+ um ............ Nutzerverwaltung
+ file-cms ...... Dateiverwaltung
+
+ data ............ WebBox Datenablage
+ db ............ relationale Datenbanken (von Derby verwaltet)
+ udb ......... WebBox Nutzer und Rollen
+ home .......... private Daten
+ www ........... oeffentliche Daten
+ logs .......... Logs
+ tc-work ....... Tomcat Cache
+ tc-temp ....... Temp-Verzeichnis für Webapps
+
+ .conf ........... interne Inhalte der WebBox
+ bin ........... WebBox-Skripte
+ prg ........... WebBox-Software
+ derby ....... Derby (optional)
+ java ........ Java (optional)
+ tc-home ..... Tomcat CATALINA_HOME (optional)
+ bin ....... Tomcat-Skripte
+ conf ...... leer/ungenutzt
+ lib ....... Tomcat-Bibliotheken
+ logs ...... leer/ungenutzt
+ temp ...... leer/ungenutzt
+ webapps ... leer/ungenutzt
+ work ...... leer/ungenutzt
+ tc-base ..... WebBox CATALINA_BASE
+ bin ....... nur tomcat-juli.jar
+ conf ...... Tomcat-Konfiguration für die WebBox
+ lib ....... Bibliotheken für die WebBox
+ logs ...... leer/ungenutzt
+ temp ...... leer/ungenutzt
+ webapps ... leer/ungenutzt
+ work ...... leer/ungenutzt</pre>
+</div>
+</div>
+<div class="paragraph">
+<p>Der Ordner <code>data</code> ist für veränderliche Daten des Nutzers vorgesehen, die Konfiguration ist in <a href="#wbx-ablage">Datenablage</a> näher erläutert.</p>
+</div>
+</div>
+<div class="sect2">
+<h3 id="wbx-java-konf"><a class="anchor" href="#wbx-java-konf"></a>6.2. Java</h3>
+<div class="paragraph">
+<p>An der Konfiguration von Java macht die WebBox keine Änderungen.</p>
+</div>
+</div>
+<div class="sect2">
+<h3 id="wbx-tc-konf"><a class="anchor" href="#wbx-tc-konf"></a>6.3. Tomcat</h3>
+<div class="paragraph">
+<p>Die Konfiguration von Tomcat wurde für die WebBox angepasst und befindet sich in <code>$WBX-INST/.conf/prg/tc-base</code>. Die folgenden Änderungen an der Standardkonfiguration von Tomcat wurden unternommen.</p>
+</div>
+<div id="wbx-port" class="dlist">
+<dl>
+<dt class="hdlist1">Port</dt>
+<dd>
+<p>Der Port der WebBox ist in der Datei <code>$WBX-INST/.conf/prg/tc-base/conf/server.xml</code> eingestellt. Dort ist im Element <code>Connector</code> das Attribut <code>port</code> standardmäßig auf <code>8089</code> gesetzt. An dieser Stelle kann ohne Auswirkung auf die Konfiguration der WebBox ein beliebiger anderer Port eingetragen werden.</p>
+</dd>
+<dt class="hdlist1">JarScanner</dt>
+<dd>
+<p>In <code>$WBX-INST/.conf/prg/tc-base/conf/context.xml</code> wurde der Eintrag <code><JarScanner scanManifest="false"/></code> hinzugefügt (Quelle: <a href="http://www.skybert.net/java/tomcat-fails-to-scan-jar-file-that-i-never-asked-for/" class="bare">http://www.skybert.net/java/tomcat-fails-to-scan-jar-file-that-i-never-asked-for/</a> ).</p>
+</dd>
+<dt class="hdlist1">Datenbanktreiber</dt>
+<dd>
+<p>Zur Verwendung von Derby Datenbanken über den ClientDriver müssen ab Derby 10.15 die folgenden JARs im Classpath sein: <code>derbyclient.jar</code>, <code>derbyshared.jar</code> und <code>derbytools.jar</code>. Diese sind in <code>$WBX-INST/.conf/prg/tc-base/lib</code> abgelegt.</p>
+</dd>
+<dt class="hdlist1">Ablageort der Log-Dateien</dt>
+<dd>
+<p>In der Datei <code>$WBX-INST/.conf/prg/tc-base/conf/logging.properties</code> wurden die Ablageorte für Log-Dateien auf das Verzeichnis <code>${wbx.data}/logs</code> umgestellt. In <code>$WBX-INST/.conf/prg/tc-base/conf/server.xml</code> wurde das Attribut <code>directory</code> für das <code>AccessLogValve</code> auf den Ordner <code>${wbx.data}/logs</code> umgestellt.</p>
+</dd>
+<dt class="hdlist1">Ablageort für Apps</dt>
+<dd>
+<p>In <code>$WBX-INST/.conf/prg/tc-base/conf/server.xml</code> wurde das Attribut <code>appBase</code> für den Host <code>localhost</code> auf <code>${wbx.apps}</code> umgestellt.</p>
+</dd>
+<dt class="hdlist1">Tomcat Work-Ordner</dt>
+<dd>
+<p>In <code>$WBX-INST/.conf/prg/tc-base/conf/server.xml</code> wurde im Element <code>Host</code> der Engine <code>Catalina</code> das Attribut <code>workDir</code> hinzugefügt. Es verweist auf <code>${wbx.data}/tc-work/Catalina</code>, damit nicht ins <code>CATALINA_BASE</code>-Verzeichnis geschrieben wird.</p>
+</dd>
+<dt class="hdlist1">Kontexte <code>data</code> und <code>home</code></dt>
+<dd>
+<p>In <code>$WBX-INST/.conf/prg/tc-base/conf/Catalina/localhost</code> wurden die Dateien <code>data.xml</code> und <code>home.xml</code> angelegt. Sie verweisen auf <code>${wbx.data}/www</code> sowie <code>${wbx.data}/home</code> und sorgen so dafür, dass Tomcat die Inhalte dieser beiden Datenverzeichnisse ausgibt. Deren Anlage beschreibt das Kapitel Dateiverwaltung. Ihre Konfiguration ist im Kapitel Datenablage beschrieben.</p>
+</dd>
+<dt class="hdlist1">Single Sign-On</dt>
+<dd>
+<p>In <code>$WBX-INST/.conf/prg/tc-base/conf/server.xml</code> wurde das SingleSignOn valve eingeschaltet. Eine Benutzeranmeldung wirkt über alle Webanwendungen der WebBox hinweg.</p>
+</dd>
+</dl>
+</div>
+<div class="sect3">
+<h4 id="wbx-tc-klein"><a class="anchor" href="#wbx-tc-klein"></a>6.3.1. Tomcat verkleinern</h4>
+<div class="paragraph">
+<p>Das Installationspaket von Tomcat ist mehr als 16 MB groß. Für die WebBox ist nur der Inhalt in den Ordnern <code>bin</code> und <code>lib</code> erforderlich. Diese beiden Ordner allein erfordern nur 10 MB. Verzichtet man auch auf Java Server Pages (JSP), lässt sich Tomcat auf 4,8 MB verkleinern.</p>
+</div>
+<div class="paragraph">
+<p>Beim Verzicht auf JSP können alle Klassenbibliotheken weggelassen werden ausser den folgenden:</p>
+</div>
+<div class="dlist">
+<dl>
+<dt class="hdlist1">Tomcat-Ordner <code>lib</code></dt>
+<dd>
+<p>annotations-api.jar, catalina.jar, catalina-ant.jar, jaspic-api.jar, serlet-api.jar, tomcat-api.jar, tomcat-coyote.jar, tomcat-dbcp.jar, tomcat-jdbc.jar, tomcat-jni.jar, tomcat-util-scan.jar</p>
+</dd>
+</dl>
+</div>
+<div class="sect4">
+<h5 id="wbx-jsp-aus"><a class="anchor" href="#wbx-jsp-aus"></a>JSP ausschalten</h5>
+<div class="paragraph">
+<p>Wenn JSP weggelassen werden, müssen diese in der Datei <code>$WBX-INST/.conf/prg/tc-base/conf/web.xml</code> deaktiviert werden. Dazu wird das JSP-Servlet und das JSP-Servlet-Mapping auskommentiert, damit die fehlenden JSP-Bibliotheken nicht zu Abbrüchen beim Start des Servers führen.</p>
+</div>
+</div>
+</div>
+</div>
+<div class="sect2">
+<h3 id="wbx-derby-konf"><a class="anchor" href="#wbx-derby-konf"></a>6.4. Derby</h3>
+<div class="paragraph">
+<p>Mit dem Start der WebBox wird ein <a href="https://db.apache.org/derby/papers/DerbyTut/ns_intro.html">Derby Network Server</a> auf Port 1528 gestartet. Der Port kann im Startskript, der Datei <code>$WBX-INST/.conf/bin/dns</code>, in der Variablen <code>DERBY_PORT</code> geändert werden.</p>
+</div>
+<div class="paragraph">
+<p>Ein geänderter Port für Derby muss auch allen Anwendungen bekannt gegeben werden, die eine Datenbank benutzen. Im Auslieferungszustand der WebBox betrifft das</p>
+</div>
+<div class="ulist">
+<ul>
+<li>
+<p>Tomcat, Element <code>GlobalNamingResources</code> in der Datei <code>$WBX-INST/.conf/prg/tc-base/conf/server.xml</code></p>
+</li>
+<li>
+<p>die Nutzerverwaltung, Datei <code>$WBX-INST/apps/um/META-INF/context.xml</code></p>
+</li>
+</ul>
+</div>
+<div class="paragraph">
+<p>Die oben erwähnte Datei <code>context.xml</code> der Nutzerverwaltung ist ein Beispiel für das Einbinden einer Derby-Datenbank in andere Webanwendungen, die auf der WebBox laufen. Webanwendungen können mit <code>META-INF/context.xml</code> eine JDBC-Datenquelle deklarieren und müssen damit im Programmcode nur den Namen der Datenquelle laut Attribut <code>name</code> verwenden. Einzelheiten der Konfiguration werden so wirksam aus dem Programmcode ferngehalten.</p>
+</div>
+<div class="paragraph">
+<p>Die Verwendung von Derby-Datenbanken in Java-Programmen ist beispielsweise in der <a href="https://uhilger.de/data/pg/baselink/anleitung.adoc">Dokumentation von BaseLink</a> beschrieben.</p>
+</div>
+</div>
+<div class="sect2">
+<h3 id="wbx-konf-um"><a class="anchor" href="#wbx-konf-um"></a>6.5. Nutzerverwaltung</h3>
+<div class="paragraph">
+<p>Die Nutzerverwaltung ist ein zentraler Bestandteil der WebBox, der Hand in Hand mit der Container Managed Security des Servlet Containers geht. Die WebBox ist in diesem Punkt konform mit der Java-Spezifikation: Webanwendungen auf der Grundlage der Java-Spezifikation können die Authentifizierung und Autorisierung der WebBox nahtlos einbinden.</p>
+</div>
+<div class="paragraph">
+<p>Für die WebBox werden Benutzer und Rollen über eine mitgelieferte Webanwendung in einer relationalen Datenbank gespeichert und verwaltet. Die Konfiguration zur Verwendung der Nutzerdatenbank ist in der <a href="https://uhilger.de/data/pg/Nutzerverwaltung/anleitung.adoc#tc-realm">Anleitung</a> beschrieben und so wie dort beschrieben in der Konfiguration der WebBox im Ordner <code>.conf/prg/tc-base/conf</code> eingerichtet.</p>
+</div>
+<div class="paragraph">
+<p>Die Kennworte von Benutzern werden in der Nutzerdatenbank der WebBox verschlüsselt gespeichert. Sie können bei Einblick in die Datenbank nicht im Klartext gelesen werden.</p>
+</div>
+</div>
+<div class="sect2">
+<h3 id="wbx-ablage"><a class="anchor" href="#wbx-ablage"></a>6.6. Datenablage</h3>
+<div class="paragraph">
+<p>In <code>$WBX-INST/data/home</code> liegen Daten, die die WebBox nur an den angemeldeten Benutzer ausgibt. Der Ordner <code>$WBX-INST/data/www</code> enthält öffentliche Daten, die von der WebBox als öffentliche Inhalte ohne Einschränkung ausgeliefert werden. Die Einstellungen hierfür sind in den in ihnen befindlichen Ordnern namens <code>WEB-INF</code> konfiguriert. Diese sind in der Dateiverwaltung der WebBox nicht sichtbar. Ihr Name oder Inhalt darf nicht verändert werden.</p>
+</div>
+<div class="paragraph">
+<p>Die Datenablage kann allerdings so wie sie ist an einen beliebigen anderen Ort verschoben werden. Der neue Ablageort muss dann in der Konfiguration der WebBox vermerkt werden, wie in <a href="#wbx-daten-apps">Daten und Apps</a> beschrieben.</p>
+</div>
+</div>
+<div class="sect2">
+<h3 id="wbx-root-app"><a class="anchor" href="#wbx-root-app"></a>6.7. WebBox Startseite</h3>
+<div class="paragraph">
+<p>Die Startseite der WebBox befindet sich im Ordner <code>$WBX-INST/apps/ROOT</code>. Sie kann beliebig geändert werden.</p>
+</div>
+</div>
+<div class="sect2">
+<h3 id="wbx-konf-file-cms"><a class="anchor" href="#wbx-konf-file-cms"></a>6.8. Dateiverwaltung</h3>
+<div class="paragraph">
+<p>Die <a href="bedienung.adoc#wbx-file-cms">Dateiverwaltung</a> der WebBox ist eine Java-Webanwendung und befindet sich im Ordner <code>$WBX-INST/apps/file-cms</code>. Die Dateiverwaltung ist speziell für die Verwaltung der Inhalte der <a href="#wbx-ablage">WebBox-Datenablage</a> via Browser ausgelegt und vorkonfiguriert. Sie kann zudem prinzipiell mit beliebigen Datei-Systemen verwendet werden.</p>
+</div>
+<div class="paragraph">
+<p>Ihr Quellcode und weitere Informationen sind im <a href="https://uhilger.de/gitblit/docs/file-cms.git">Code Repository</a> enthalten.</p>
+</div>
+</div>
+<div class="sect2">
+<h3 id="wbx-lib"><a class="anchor" href="#wbx-lib"></a>6.9. WebBox Lib</h3>
+<div class="paragraph">
+<p>Die Datei <code>wb-lib.jar</code> im Ordner <code>$WBX-INST/.conf/tc-base/lib</code> enthält Java-Klassen, die für die Ausgabe von Inhalten der <a href="#wbx-ablage">WebBox-Datenablage</a> wichtig sind. Weitere Informationen und ihr Quellcode ist im <a href="https://uhilger.de/gitblit/docs/wbx-lib.git">Code Repository</a> enthalten.</p>
+</div>
+</div>
+<div class="sect2">
+<h3 id="wbx-erweitern"><a class="anchor" href="#wbx-erweitern"></a>6.10. WebBox erweitern</h3>
+<div class="paragraph">
+<p>Die WebBox kann mit Webanwendungen erweitert werden, die der <a href="https://javaee.github.io/servlet-spec/downloads/servlet-3.1/Final/servlet-3_1-final.pdf#G14.999461">Java Servlet Spezifikation</a> folgen. Solche Webanwendungen werden gewöhnlich als Dateien mit Endung <code>.war</code> für <strong>w</strong>eb <strong>ar</strong>chive ausgeliefert. Eine <code>.war</code>-Datei wird einfach in den Ordner <code>$WBX-INST/apps</code> gelegt, um die Webanwendung mit der WebBox auszuführen. Wird beispielsweise die Datei <code>meine-app.war</code> so installiert, ist sie aufrufbar mit</p>
+</div>
+<div class="paragraph">
+<p><code>http://localhost:8089/meine-app/</code></p>
+</div>
+<div class="paragraph">
+<p>Erfordert die App eine Datenbank, wird gewöhnlich die Java Database Connectivity (JDBC) eingesetzt. Die App kann dann das Datenbanksystem der WebBox verwenden wie im Kapitel <a href="#wbx-derby-konf">Derby</a> beschrieben.</p>
+</div>
+<div class="sect3">
+<h4 id="wbx-statischer-inhalt"><a class="anchor" href="#wbx-statischer-inhalt"></a>6.10.1. Statische Webseiten</h4>
+<div class="paragraph">
+<p>Auf ähnliche Weise können auch statische Inhalte wie HTML-Seiten, Bilder oder Javscript-Programme genutzt werden. Im einfachsten Fall wird ein neuer Ordner im Ordner <code>$WBX-INST/apps</code> erstellt und die betreffenden Inhalte dort hineingelegt. Wird zum Beispiel ein neuer Ordner <code>mein-webinhalt</code> mit einer Datei <code>index.html</code> darin in den Order <code>$WBX-INST/apps</code> gelegt, ist der Inhalt anschließend aufrufbar mit</p>
+</div>
+<div class="paragraph">
+<p><code>http://localhost:8089/mein-webinhalt/</code></p>
+</div>
+<div class="paragraph">
+<p>Auf dieselbe Weise funktionieren statische Inhalte, die in den Ordner <code>$WBX-INST/data/www</code> gelegt werden. Hier ist allerdings der Unterschied, dass sie dort auch mit der <a href="bedienung.adoc#wbx-file-cms">Dateiverwaltung</a> der WebBox verwendet werden können.</p>
+</div>
+</div>
+</div>
+</div>
+</div>
+<div class="sect1">
+<h2 id="_dokumenthistorie"><a class="anchor" href="#_dokumenthistorie"></a>7. Dokumenthistorie</h2>
+<div class="sectionbody">
+<table class="tableblock frame-all grid-all stretch">
+<caption class="title">Tabelle 1. Änderungen</caption>
+<colgroup>
+<col style="width: 11.1111%;">
+<col style="width: 22.2222%;">
+<col style="width: 22.2222%;">
+<col style="width: 44.4445%;">
+</colgroup>
+<thead>
+<tr>
+<th class="tableblock halign-center valign-bottom">Nr</th>
+<th class="tableblock halign-left valign-bottom">Datum</th>
+<th class="tableblock halign-left valign-bottom">Autor</th>
+<th class="tableblock halign-left valign-bottom">Beschreibung</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td class="tableblock halign-center valign-bottom"><p class="tableblock">1</p></td>
+<td class="tableblock halign-left valign-bottom"><p class="tableblock">9. Mai 2020</p></td>
+<td class="tableblock halign-left valign-bottom"><p class="tableblock">Ulrich</p></td>
+<td class="tableblock halign-left valign-bottom"><p class="tableblock">Erste Anlage der Version 3 der WebBox</p></td>
+</tr>
+<tr>
+<td class="tableblock halign-center valign-bottom"><p class="tableblock">2</p></td>
+<td class="tableblock halign-left valign-bottom"><p class="tableblock">10. Januar 2021</p></td>
+<td class="tableblock halign-left valign-bottom"><p class="tableblock">Ulrich</p></td>
+<td class="tableblock halign-left valign-bottom"><p class="tableblock">Neue Dokumentation Version 3</p></td>
+</tr>
+<tr>
+<td class="tableblock halign-center valign-bottom"><p class="tableblock">3</p></td>
+<td class="tableblock halign-left valign-bottom"><p class="tableblock">16. Januar 2021</p></td>
+<td class="tableblock halign-left valign-bottom"><p class="tableblock">Ulrich</p></td>
+<td class="tableblock halign-left valign-bottom"><p class="tableblock">V3.1: Installation, Sicherung</p></td>
+</tr>
+<tr>
+<td class="tableblock halign-center valign-bottom"><p class="tableblock">4</p></td>
+<td class="tableblock halign-left valign-bottom"><p class="tableblock">22. Januar 2021</p></td>
+<td class="tableblock halign-left valign-bottom"><p class="tableblock">Ulrich</p></td>
+<td class="tableblock halign-left valign-bottom"><p class="tableblock">V3.1: Aufteilung der Dokumente</p></td>
+</tr>
+<tr>
+<td class="tableblock halign-center valign-bottom"><p class="tableblock">5</p></td>
+<td class="tableblock halign-left valign-bottom"><p class="tableblock">24. Januar 2021</p></td>
+<td class="tableblock halign-left valign-bottom"><p class="tableblock">Ulrich</p></td>
+<td class="tableblock halign-left valign-bottom"><p class="tableblock">V3.1: Verweise angepasst</p></td>
+</tr>
+</tbody>
+</table>
+</div>
+</div>
+</div>
+<div id="footer">
+<div id="footer-text">
+Version 3.1<br>
+Letzte Änderung 2021-01-24 13:47:49 +0100
+</div>
+</div>
+<link rel="stylesheet" href="/jslib/highlight-adoc/styles/github.min.css">
+<script src="/jslib/highlight-adoc/highlight.min.js"></script>
+<script>hljs.initHighlighting()</script>
+</body>
+</html>
diff --git a/web/META-INF/daten/www/dok/wbx/js-info.htmi b/web/META-INF/daten/www/dok/wbx/js-info.htmi
deleted file mode 100644
index bb3df1a..0000000
--- a/web/META-INF/daten/www/dok/wbx/js-info.htmi
+++ /dev/null
@@ -1,5 +0,0 @@
-<h1>Über Javasacript</h1>
-<p><a href="https://de.wikipedia.org/wiki/JavaScript">Javascript</a> ist eine Skriptsprache, die von Webbrowsern ausgeführt werden kann. Die WebBox verwendet Javascript zum Beispiel bei der Anzeige von Bildern. Auch die Apps, die der WebBox beiliegen verwenden Javascript.</p>
-<p>Javascript wird dabei in einer unschädlichen Weise verwendet und verletzt nicht die Privatsphäre. Jeder kann sich selbst von der Unbedenklichkeit überzeugen, alle Teile des <a href="http://uhilger.de/gitblit/docs/wbx-shell.git">Codes</a> sind frei zugänglich.</p>
-<p> </p>
-<p><a href="/">zurück zur Hauptseite</a></p>
\ No newline at end of file
diff --git a/web/proto/flex-versuch-3.html b/web/proto/flex-versuch-3.html
deleted file mode 100644
index f42b60e..0000000
--- a/web/proto/flex-versuch-3.html
+++ /dev/null
@@ -1,254 +0,0 @@
-<!DOCTYPE html>
-<html>
- <head>
- <title>Flexbox Demo</title>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <style>
- html {
- margin: 0;
- padding: 0;
- height: 100%; /* Anmerkung 2 */
- }
- body {
- margin: 0;
- padding: 0;
- height: 100%; /* Anmerkung 2 */
- min-height: 0; /* Anmerkung 1 */
- display: flex;
- flex-flow: column;
- }
- .inhalt {
- display: flex;
- flex-flow: row;
- height: 100%; /* Anmerkung 2 */
- min-height: 0; /* Anmerkung 1 */
- }
- .nord {
- background-color: lightgray;
- }
- .sued {
- background-color: lightgray;
- }
- .west {
- flex-grow: 0;
- flex-shrink: 0;
- flex-basis: 10em;
- background-color: antiquewhite;
- }
- .ost {
- flex-grow: 0;
- flex-shrink: 0;
- flex-basis: 10em;
- background-color: antiquewhite;
- }
- .zentrum {
- width: 100%;
- height: 100%;
- overflow: auto;
- -webkit-overflow-scrolling: touch;
- }
- .lipsum {
- color: lightgrey;
- }
-
- /*
- Anmerkungen:
- 1.) min.height: 0 fuer body und inhalt ist gegen einen Bug, vgl.
- http://stackoverflow.com/questions/33859811/understanding-flexbox-and-overflowauto
- 2.) height 100% fuer html, body und inhalt sorgt dafuer, dass sich alles
- immer ueber das gesamte Browserfenster ausdehnt.
- */
- </style>
- </head>
- <body>
- <!-- Kopfzeile -->
- <div class="nord">
- Kopfzeile
- </div>
- <div class="inhalt">
- <!-- westliche Seitenleiste -->
- <div class="west">
- westliche Seitenleiste
- </div>
- <!-- zentraler Inhaltsbereich -->
- <div class="zentrum">
- <p>
- Dies ist ein Beispiel für eine Webseite, die ein
- <code>flexbox</code>-Layout für die Anordnung ihrer Inhalte
- nutzt.
- </p>
- <p>
- Der Inhaltsbereich in der Mitte passt sich zur Laufzeit dynamisch
- an die Größe des Browserfensters an. Er wird von einer
- Kopfzeile, einer Fußzeile und zwei Seitenleisten umschlossen
- die eine feste Größe haben.
- </p>
- <p>
- Nachfolgend einiger Text, der das Verhalten des Layouts demonstrieren
- soll, wenn die Textmenge den vorhandenen Raum übersteigt.
- </p>
- <div class="lipsum">
- <p>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac maximus velit. Curabitur tellus lorem, porta bibendum sollicitudin ac, cursus ut nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris non ornare mauris. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent id est nec tellus consequat viverra ut a nunc. Fusce sagittis pulvinar diam, vel ultricies sapien pretium nec. Aliquam ac arcu vehicula ex fringilla cursus.
- </p>
- <p>
- Donec sit amet efficitur nisl. Aliquam rutrum mattis ante quis ultrices. In non blandit ex. Aenean fermentum feugiat orci at malesuada. Sed vitae facilisis erat, at luctus erat. Nulla sodales leo eget sem pretium, elementum porttitor nulla feugiat. Mauris eget lectus a felis finibus condimentum sed et diam. Donec nec nunc sit amet erat feugiat iaculis. Vestibulum sem ante, ornare a hendrerit vel, facilisis et libero. Donec a libero congue, blandit neque mattis, fringilla augue.
- </p>
- <p>
- Mauris et volutpat orci, sodales lacinia neque. Sed quis ex velit. Donec quis urna vel leo tincidunt ultricies. Aliquam neque justo, vestibulum at tristique eget, rhoncus bibendum diam. Phasellus iaculis diam massa, ac euismod massa vulputate et. Quisque sed diam maximus, commodo risus eget, rutrum neque. Vivamus tellus enim, vehicula at erat rhoncus, rutrum sagittis tellus. Nulla ornare, libero in ornare placerat, enim quam finibus ipsum, at dictum augue diam sit amet lacus. Aliquam at lectus ac urna imperdiet dictum.
- </p>
- <p>
- Nullam finibus erat ac dolor vehicula aliquet. Nam pretium ut dolor ut ultricies. Nam posuere ipsum neque, at placerat sem egestas vitae. Curabitur velit dui, ultrices a justo nec, sollicitudin ultricies mi. Ut mauris nisl, pharetra ac lectus sed, finibus pharetra ligula. Praesent eleifend, erat nec cursus feugiat, sapien sem blandit est, eget bibendum metus enim condimentum metus. Etiam ultricies ante et ante molestie tempor quis et orci. Suspendisse auctor turpis nec turpis pulvinar, commodo faucibus neque dapibus. Quisque metus velit, bibendum at varius ut, efficitur mollis massa. Sed molestie mi sed ultricies mollis. Nullam sagittis imperdiet imperdiet. Ut auctor interdum molestie. Aliquam luctus libero magna, ac vulputate massa sollicitudin sed.
- </p>
- <p>
- Praesent at finibus dolor. Praesent feugiat est in enim imperdiet, ut egestas quam fringilla. Vivamus urna ante, interdum a posuere ut, suscipit vitae nisi. Aliquam finibus dolor eget dictum pharetra. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut non commodo nisi. Vivamus pharetra arcu at molestie scelerisque.
- </p>
- <p>
- Donec tincidunt in purus eu feugiat. Duis vitae tincidunt eros, vitae lobortis sem. Integer tempor porta quam, non varius urna congue nec. Nullam accumsan, mi et vehicula gravida, leo ligula tempor leo, vel luctus ligula dui sit amet libero. Cras ac lacinia est, eu luctus tellus. Nullam in vestibulum massa. Suspendisse potenti. Morbi congue nisi et finibus accumsan.
- </p>
- <p>
- Etiam diam augue, porta vel lobortis a, luctus non ligula. Proin elementum vel mi at ultrices. Quisque iaculis tincidunt elit in egestas. Aliquam erat volutpat. Phasellus nec leo eleifend est elementum aliquam at nec sapien. In hac habitasse platea dictumst. Aliquam blandit nunc nec est volutpat, quis lobortis augue pulvinar.
- </p>
- <p>
- Ut ac congue leo. Sed massa felis, ultricies vitae blandit non, euismod eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vitae lobortis magna, in varius nisl. Donec at commodo lectus, sagittis tincidunt mi. Nunc cursus orci in tellus vulputate auctor. Sed iaculis nisi id accumsan venenatis. Suspendisse tincidunt risus ut suscipit molestie. Duis ullamcorper sit amet quam vel sagittis. Ut lacinia mi diam, id semper ipsum auctor quis. Maecenas non metus volutpat, cursus tellus a, blandit tortor. Proin ultricies mauris ut sem dictum, sed fermentum magna rhoncus. Nam id elit nec nisi mollis laoreet eget rhoncus mauris. Suspendisse in lorem lorem. Nam scelerisque condimentum dui dignissim fermentum. Pellentesque congue molestie dignissim.
- </p>
- <p>
- Proin maximus, tortor at tristique sagittis, leo tellus gravida neque, quis efficitur eros leo sed nisl. Vivamus fermentum lobortis magna in consectetur. Vestibulum ipsum purus, rutrum id faucibus sit amet, sagittis eget mauris. Integer ultricies tristique enim. Phasellus ultricies lacinia ipsum, eget hendrerit quam ultrices et. Donec viverra eget massa eu tincidunt. Pellentesque vel ligula semper eros cursus porttitor. Proin pretium magna purus. Duis laoreet est vel gravida finibus. Sed et varius neque, nec tincidunt est. In hac habitasse platea dictumst. Donec placerat ultrices diam at maximus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
- </p>
- <p>
- Nulla vel gravida diam, sed aliquet mauris. Donec pulvinar arcu id consequat tincidunt. Nullam bibendum tellus non finibus tincidunt. Nunc finibus, lorem non ornare efficitur, turpis lacus sodales arcu, ut interdum massa quam in dui. Vivamus turpis nibh, dignissim in lectus vitae, posuere egestas lectus. Ut tincidunt tellus ut risus iaculis bibendum. Cras consequat facilisis risus, vel rhoncus nunc ornare id. Morbi elementum luctus nisl eu interdum. Integer dictum lectus aliquet lorem varius, quis egestas tellus maximus. Nam ex neque, tristique quis ipsum non, porttitor tincidunt augue. Vivamus eu consectetur velit.
- </p>
- <p>
- Donec et imperdiet massa. Morbi cursus, diam ac consequat mattis, ante justo mattis ex, ultrices vulputate erat neque id turpis. Donec vitae purus vitae neque mollis pulvinar. Aenean fermentum dui et enim consequat viverra. Curabitur vel urna ut purus auctor ultricies. Maecenas a tortor nunc. Praesent ornare velit in dui aliquam, id ullamcorper quam aliquet. Aenean id tempor neque. Nulla id semper ipsum. Aliquam sit amet lacus ut orci facilisis viverra. Morbi ut euismod nunc, at fringilla dui. Curabitur mi eros, porta eu tortor eu, feugiat rhoncus purus. Donec ligula leo, vestibulum nec neque vitae, aliquet semper felis.
- </p>
- <p>
- Vivamus rutrum vulputate nunc, non dignissim enim placerat nec. Mauris finibus nisi ac dapibus vehicula. Ut vitae pharetra odio, eu tristique nulla. Vestibulum fringilla orci lacus, non imperdiet mauris venenatis a. In finibus lacus quis malesuada tempus. Sed ac neque ultricies ligula volutpat tempor. Vestibulum sit amet elementum ligula, ut laoreet nibh. Aenean vitae congue velit. Vestibulum vel sapien sem. Praesent consequat libero massa, eu cursus nulla rhoncus a. Suspendisse non sapien nec erat varius varius sit amet ac sem. Aenean ullamcorper cursus nulla, quis euismod dui cursus sed. Vivamus ornare lorem non tortor feugiat volutpat.
- </p>
- <p>
- Praesent viverra in libero vel laoreet. Integer euismod vestibulum mi id efficitur. Pellentesque orci dolor, aliquet vitae accumsan ut, pellentesque eu dolor. Nulla dolor neque, consectetur sed ornare eu, laoreet vehicula purus. Pellentesque tristique, orci vitae feugiat semper, ligula urna rhoncus ipsum, et ullamcorper arcu lorem nec leo. Phasellus tristique dui at purus lacinia rutrum. Cras semper, ipsum non blandit egestas, orci eros malesuada nisl, quis facilisis diam lectus feugiat dolor. Suspendisse potenti.
- </p>
- <p>
- In et malesuada enim. Vestibulum tristique eleifend arcu quis laoreet. Ut nec leo libero. Nunc auctor orci a interdum suscipit. Morbi in metus aliquet magna venenatis ullamcorper ac vel elit. Aliquam malesuada magna ante, quis semper ipsum porta a. Aliquam dolor velit, hendrerit at nibh nec, commodo dictum metus. Quisque sed purus sit amet arcu semper rutrum a ac justo. Aliquam ultrices facilisis est non faucibus.
- </p>
- <p>
- Aliquam tristique lacinia nulla, eu varius est pulvinar ac. Ut maximus hendrerit justo non dignissim. Sed non metus accumsan, dictum mi id, rutrum ligula. In gravida odio velit, ac sollicitudin nunc tempor sit amet. Cras id bibendum dui. Etiam at massa ac diam facilisis congue pulvinar nec mauris. Donec placerat ut nulla et dignissim. Suspendisse potenti. Quisque id quam feugiat, placerat sapien at, porttitor ligula. Vestibulum luctus tellus ac nisl accumsan, vitae scelerisque neque accumsan. Duis vitae ullamcorper sapien, nec ullamcorper sem. Sed ut lectus a metus cursus sollicitudin nec eu nibh. Nunc sit amet aliquet eros, vel luctus ligula. Nam enim nunc, semper eu bibendum quis, laoreet id mauris. Mauris placerat, sapien eget sollicitudin vehicula, leo ipsum laoreet augue, eget convallis dui nisl vel velit.
- </p>
- <p>
- Morbi pharetra porta augue ut commodo. Proin porta dignissim leo ac aliquet. Morbi id tellus at odio pretium bibendum molestie interdum ante. Suspendisse potenti. Nunc pretium lorem vel massa tincidunt elementum. Nulla vulputate ex sit amet felis sodales elementum. Donec ex lacus, posuere consequat sodales in, elementum elementum nisl. Curabitur convallis sapien id lorem sagittis, vel mollis nibh iaculis. Morbi congue tincidunt purus, vel ultrices nibh accumsan vel. Aliquam tristique lacinia urna, eleifend euismod leo varius nec. Sed faucibus id mi a viverra. Nunc nec augue ut nibh luctus varius at at sem. Nam et accumsan sapien. Suspendisse potenti. Donec rutrum sapien id elit accumsan, eget ornare arcu condimentum.
- </p>
- <p>
- Phasellus volutpat purus a pharetra tincidunt. In hac habitasse platea dictumst. Aenean eleifend nec nibh ac rutrum. Maecenas sed pharetra augue, quis posuere ipsum. Praesent scelerisque venenatis arcu nec tempus. Fusce quis pretium lorem. Aenean suscipit auctor tortor, porta porttitor diam scelerisque quis.
- </p>
- <p>
- Aliquam non tellus a est tristique lacinia non quis arcu. Ut faucibus varius erat et tincidunt. Morbi semper mattis gravida. Ut metus orci, blandit id sapien nec, auctor fringilla felis. Donec nisl mauris, pulvinar et ipsum at, finibus consequat magna. Ut at ultrices odio. Quisque at enim at ipsum venenatis rhoncus. Morbi sit amet nunc fermentum, tempus elit in, ornare velit. Donec vehicula mollis dui vitae euismod.
- </p>
- <p>
- Curabitur vel metus malesuada erat dictum vulputate et id est. Vivamus eu tincidunt risus. Suspendisse gravida lectus ut ante varius, at viverra tellus ultricies. Morbi varius purus quis tortor sodales, a pulvinar neque efficitur. Nulla varius, diam et pretium tincidunt, sapien est tempor magna, fermentum dictum dolor nulla nec ligula. Fusce semper nisl sit amet posuere maximus. Donec lacinia lectus sed nisi finibus vestibulum. Nullam venenatis venenatis quam vehicula euismod. Nunc mattis porttitor neque feugiat pellentesque. Interdum et malesuada fames ac ante ipsum primis in faucibus.
- </p>
- <p>
- Suspendisse mollis, dolor quis consectetur eleifend, mi ex tempor arcu, id mollis sem orci vel sapien. Mauris venenatis, orci vel pulvinar ullamcorper, dui diam tincidunt ipsum, eget fringilla risus est placerat urna. Proin iaculis eu massa eget dictum. Aenean et enim quis purus maximus lacinia nec non mauris. Vivamus sollicitudin facilisis lectus, quis lobortis massa suscipit at. Phasellus et enim sed mauris efficitur aliquet. Pellentesque sed nisl eu augue tincidunt lacinia in quis magna. In congue euismod purus, et congue est placerat vitae. Maecenas id neque turpis. Sed tincidunt condimentum orci, et facilisis odio molestie a. Phasellus ut molestie justo. In laoreet tempor maximus. Curabitur eget consectetur est, et condimentum urna.
- </p>
- <p>
- Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque elit nisl, blandit nec eleifend a, eleifend id nunc. Etiam nunc enim, fermentum malesuada sollicitudin nec, pellentesque nec elit. Donec rhoncus semper cursus. Mauris dapibus, ante a tincidunt fringilla, augue nibh interdum sapien, ac imperdiet felis augue ut orci. Integer viverra venenatis elit vitae vulputate. Suspendisse ornare ante eu odio mattis, nec aliquam diam viverra. Aenean volutpat orci enim, vel porta erat condimentum vitae. Nam rhoncus mi eu libero hendrerit, sit amet viverra enim cursus.
- </p>
- <p>
- Duis tincidunt ultricies neque, vel dapibus lectus. Suspendisse et dui et felis tincidunt elementum. Aenean ac lacus tempor, placerat ante vitae, auctor nulla. Cras dignissim tortor quam, nec rhoncus elit consectetur semper. Sed fringilla neque a mi faucibus, ac blandit mauris scelerisque. Donec eu lacinia mauris, sed bibendum sem. Vestibulum consectetur massa non volutpat auctor.
- </p>
- <p>
- Quisque eu lobortis ipsum, vel tempor magna. Sed in vehicula purus. Duis non commodo ligula, vitae posuere urna. Cras at lectus lacinia, vestibulum purus in, accumsan eros. Nam mauris leo, interdum dictum purus non, varius varius lorem. Proin at blandit nibh. Donec id ullamcorper nisl. Aenean id convallis odio, id venenatis leo. Vestibulum venenatis laoreet metus. Donec id sapien malesuada, tempus dolor vel, porttitor nisi. Aliquam eget volutpat magna.
- </p>
- <p>
- Phasellus vel auctor augue. In aliquam purus enim, porta sagittis tellus posuere nec. Fusce at tincidunt nisl. Aenean quis ultrices quam, nec posuere nunc. Curabitur quis eros eu augue auctor semper vel et sem. Etiam fringilla, arcu ut cursus molestie, massa nunc fringilla erat, ac efficitur justo ipsum ut purus. Integer vestibulum ullamcorper dui, vel facilisis purus condimentum gravida. Sed at dolor a tortor molestie feugiat. Proin sagittis convallis mi at pretium. Sed egestas sit amet mauris ac placerat. Ut molestie diam et turpis sagittis suscipit. Sed ullamcorper velit id velit pellentesque, a sagittis nibh tempor. Sed non dolor a lorem efficitur aliquam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec pretium feugiat condimentum.
- </p>
- <p>
- Etiam id placerat velit. Phasellus at pulvinar lectus. Aliquam suscipit vitae lectus vel dapibus. Morbi vel orci at neque blandit egestas. Maecenas at nunc porttitor, pellentesque est quis, egestas nibh. Proin auctor justo non felis laoreet, eu faucibus ligula volutpat. Donec dui dolor, iaculis non hendrerit volutpat, porta ac quam. Integer sed dictum dui, quis tempor felis.
- </p>
- <p>
- Phasellus quis risus non metus sagittis lobortis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut sed elementum odio. Sed ac odio non risus imperdiet dignissim. In ac velit odio. Maecenas sed enim et risus molestie venenatis interdum nec dolor. Cras viverra purus a lorem lobortis ornare. Ut quis nisl porttitor, fringilla odio vitae, accumsan diam. Morbi volutpat egestas diam, ut venenatis turpis. Donec quis dapibus sem, ut viverra lacus. Aliquam efficitur fringilla mi vel rhoncus. Vestibulum neque diam, porta ut scelerisque at, dictum non nunc. Nam purus nisl, facilisis a vulputate nec, hendrerit maximus lorem. Integer leo magna, iaculis a mattis nec, eleifend sed tellus.
- </p>
- <p>
- Curabitur dictum sed risus laoreet commodo. Integer quis tellus lectus. Vivamus nec lectus pulvinar felis tempus auctor ut in ante. Nam ultricies mauris et risus imperdiet, vitae tincidunt augue ullamcorper. Proin feugiat nisi ac diam blandit, ac gravida sapien malesuada. Etiam auctor placerat mattis. In ac leo quis velit efficitur euismod eget eu tellus. Suspendisse ac nibh lobortis, lacinia elit a, sollicitudin nibh. Ut et ligula mattis, commodo sapien quis, tempus lorem. Vivamus pellentesque mauris sit amet sem mattis vestibulum. Pellentesque quis massa maximus, lacinia justo a, auctor massa.
- </p>
- <p>
- Donec ut feugiat dolor. Phasellus eleifend id dui luctus luctus. Fusce ut arcu lectus. Mauris a velit vel purus ultricies dignissim. Duis sagittis sapien sed nisi mollis condimentum vel bibendum ante. Etiam iaculis varius dui eget dictum. In accumsan metus sed feugiat tristique.
- </p>
- <p>
- Suspendisse sit amet ipsum vitae lorem rhoncus interdum. Nam id varius ante. Maecenas mi odio, posuere eu leo eu, ullamcorper commodo urna. Aenean turpis lacus, scelerisque sit amet blandit non, pretium eget nisi. Morbi varius erat sit amet volutpat placerat. Donec ac aliquam ligula. Morbi consectetur interdum leo et suscipit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
- </p>
- <p>
- Nam non quam ullamcorper, tincidunt dui quis, suscipit justo. Aliquam vitae rutrum augue, at semper sem. Suspendisse et molestie felis, eget lacinia est. Etiam id orci et nibh dictum hendrerit non in nunc. Mauris varius augue non sagittis pellentesque. Pellentesque imperdiet dolor enim, vel venenatis augue ultrices quis. Curabitur in dapibus mauris. Nullam cursus suscipit arcu, eu ultrices lorem tempor vel. Ut ante orci, iaculis eu nisl et, consectetur tempor ligula. Sed ultricies, nisl at tristique efficitur, turpis lectus maximus lacus, in aliquet sem orci ac erat. Sed vestibulum imperdiet turpis, id interdum felis molestie sit amet.
- </p>
- <p>
- Ut egestas nulla sit amet arcu molestie, et condimentum nibh volutpat. Sed eu posuere urna. Ut sollicitudin ultrices urna, sed iaculis arcu. Cras in mollis lacus. Nulla pretium magna at dui pulvinar commodo. Aenean tincidunt interdum neque, ut aliquam orci lobortis non. Etiam in nulla dui. Nulla pulvinar, sem in condimentum sollicitudin, ipsum lorem egestas ex, faucibus ullamcorper turpis lectus nec eros. Aliquam velit neque, tristique eleifend mattis sit amet, imperdiet vel leo. Fusce maximus, metus eu tempus vehicula, nunc nulla ornare metus, ut porta dolor leo eu risus. Quisque egestas, lacus eget rutrum mattis, turpis enim venenatis risus, nec hendrerit justo magna sed mi. Nulla eget vulputate elit, ac sodales orci. Sed ultricies, magna a hendrerit vulputate, erat lacus ornare elit, ac rhoncus ipsum tortor ut dolor.
- </p>
- <p>
- Etiam at posuere dolor. Nunc sed mi quis ex rutrum maximus. Cras aliquam massa orci, ullamcorper facilisis leo ornare vel. Morbi et aliquam quam. Nam ut sapien sit amet purus aliquam tincidunt. Proin aliquam pretium orci, ut interdum lacus. Maecenas sit amet vehicula leo, in bibendum purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
- </p>
- <p>
- Duis sit amet orci lacinia, rutrum velit at, venenatis risus. Fusce mauris erat, facilisis ut metus ornare, consequat egestas dui. Proin iaculis pulvinar urna, id mollis velit accumsan a. Nulla eget nulla mi. Aenean ac mauris id velit varius venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam ornare ex at purus rhoncus posuere. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla quis ante a orci pharetra pretium quis nec justo. Aenean pellentesque lorem ac metus finibus, non consectetur leo ullamcorper. Nam eu ex molestie, sagittis quam et, fermentum elit. Integer non faucibus orci. Integer ultricies consequat enim ac malesuada.
- </p>
- <p>
- Ut scelerisque faucibus dictum. In eget nisl at sem consectetur varius eu fermentum dui. Nullam eleifend dictum risus, in luctus odio sagittis ac. Nullam turpis odio, rhoncus eu augue eget, congue porta felis. Donec a efficitur urna. Vivamus diam felis, eleifend eget pretium nec, blandit ut erat. Etiam non nisi at eros congue lacinia. Proin a venenatis nisi. In erat tellus, accumsan at auctor sed, bibendum ac dolor. Cras sapien justo, pellentesque a dictum sit amet, pulvinar posuere sapien. Maecenas sodales finibus faucibus. Nullam fringilla metus velit, et vehicula turpis cursus ut. Curabitur facilisis varius cursus.
- </p>
- <p>
- Ut sodales augue a dictum fermentum. Proin ornare est urna, vitae convallis ante tristique nec. Aliquam sit amet vehicula est, quis ultricies nibh. Nullam varius vel turpis venenatis ultricies. Nullam sit amet ex sem. Nulla sit amet nisl fermentum, tincidunt magna et, vehicula libero. Nullam interdum nisi eros, vel molestie metus aliquet ut. Nam feugiat condimentum nulla sed convallis. Nunc ac orci ex. Praesent fringilla nunc velit, accumsan tincidunt nibh hendrerit dignissim. In porta purus in libero facilisis, sit amet finibus leo vehicula. Cras consequat odio hendrerit quam convallis auctor. Suspendisse arcu enim, imperdiet accumsan ante a, ornare posuere nisl.
- </p>
- <p>
- Phasellus augue massa, imperdiet at mauris at, mattis volutpat nulla. Pellentesque posuere scelerisque sagittis. Quisque ornare egestas tincidunt. Vestibulum euismod eros et risus porttitor, vitae sagittis erat condimentum. Nam pretium nunc at condimentum semper. Morbi at ligula pretium, tincidunt massa id, imperdiet velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis vel leo malesuada purus egestas venenatis. Vestibulum in nibh tincidunt, egestas massa a, ultricies ipsum. Morbi sollicitudin justo venenatis nulla volutpat condimentum. Donec ut consectetur enim. Nullam fringilla vitae mauris ac condimentum. Ut pharetra tincidunt lorem, ornare bibendum urna dignissim sed. Vivamus faucibus nisi posuere varius mollis.
- </p>
- <p>
- Nullam ex dui, tincidunt ac suscipit eget, pretium ac massa. Integer euismod gravida eros nec porttitor. Aenean vitae nibh purus. Nunc ligula mi, placerat eget leo a, commodo fermentum lacus. In vestibulum augue quis nulla consectetur ornare. Nam quis sapien id nibh placerat imperdiet suscipit sit amet augue. Morbi at dapibus eros, et dapibus massa. Nam in nisl eros. Proin vel tincidunt dolor. Aliquam non mi in neque pharetra finibus. Nulla nisl risus, pulvinar quis sapien sit amet, ultricies dictum ligula. Suspendisse in urna ac metus mattis laoreet. In auctor vehicula imperdiet.
- </p>
- <p>
- Curabitur enim quam, fringilla ut justo tempor, hendrerit tincidunt velit. Quisque non orci erat. Ut tempor malesuada ex, vitae blandit erat scelerisque non. Nulla a velit blandit, gravida lectus quis, egestas ex. Duis in lacus sodales, lobortis tortor et, dictum dui. In eget elementum nisi, quis convallis erat. Pellentesque quis varius velit.
- </p>
- <p>
- Nam vitae feugiat diam. Proin fermentum condimentum consectetur. Cras ut gravida tellus, nec sagittis justo. Mauris eu orci in ante rutrum cursus sit amet eget sem. Integer vitae elit nec nibh convallis vestibulum. Vivamus dui turpis, sodales et orci sit amet, pellentesque lobortis odio. Donec commodo arcu a nunc elementum, id cursus nunc ullamcorper. Sed ac lectus sit amet est aliquet maximus. Donec hendrerit condimentum mauris, vitae facilisis risus fermentum sed. Donec sodales porttitor diam vel laoreet. Donec sed massa tincidunt, maximus odio eu, eleifend turpis. Morbi volutpat posuere erat ut cursus.
- </p>
- <p>
- In hac habitasse platea dictumst. Vivamus a orci rutrum, bibendum velit id, rhoncus nulla. Nulla ac blandit felis. Nulla auctor turpis nisi, id sagittis enim posuere id. Sed fermentum at ante at pretium. Curabitur ante mi, suscipit eu efficitur id, pellentesque vitae lectus. Praesent sed molestie dolor.
- </p>
- <p>
- In condimentum bibendum arcu, sit amet dignissim justo fermentum in. Aenean placerat, sapien vel mollis efficitur, mi justo bibendum leo, et pretium diam augue condimentum odio. Proin sed nibh blandit, consectetur eros quis, commodo est. Nunc porta vestibulum quam eu ullamcorper. Sed tempus justo nunc, mattis accumsan lorem aliquet sed. Vestibulum volutpat nulla vel tristique tempus. Aenean facilisis ex id sapien rhoncus, sit amet iaculis nisl cursus. Nam imperdiet erat ac luctus pellentesque. Donec laoreet cursus lorem. Suspendisse hendrerit varius tincidunt. Mauris at eros auctor risus pharetra fermentum in a nulla. Nunc nec pellentesque quam. Phasellus at vestibulum turpis, id rhoncus tellus.
- </p>
- <p>
- Donec eget fringilla odio, scelerisque molestie ligula. Duis ultricies semper massa vel laoreet. Nam pretium vel lorem sed tempus. Cras justo odio, suscipit vel feugiat a, pharetra ac nulla. Quisque porta nisl vel mattis efficitur. Vivamus nibh arcu, iaculis quis turpis non, malesuada vestibulum lectus. Quisque nec leo ac lorem imperdiet ornare ac vulputate ipsum. Suspendisse luctus, lectus at gravida pretium, odio quam malesuada est, at molestie velit nulla eget nulla. Nullam varius ut neque et sagittis. Mauris tristique consequat congue. Nulla facilisi. Pellentesque tincidunt ex quis diam cursus pulvinar.
- </p>
- <p>
- Aliquam bibendum enim sit amet neque bibendum, eu egestas neque consequat. Aliquam est quam, scelerisque in mauris ac, placerat tristique nunc. Quisque gravida, massa eget fringilla elementum, odio quam elementum eros, eu hendrerit ante dolor a massa. Praesent pellentesque augue lectus, sit amet auctor augue egestas quis. Vivamus mollis, mauris hendrerit tempor congue, nisi tellus tempus velit, eget pellentesque sapien ipsum ut elit. Nam ac velit vitae augue auctor congue. Proin at cursus dui. Integer non urna ut odio porta mattis pellentesque eu tortor. Mauris sodales arcu ut ultrices faucibus. In lacus urna, semper vel ullamcorper semper, consectetur vitae quam.
- </p>
- <p>
- Vestibulum sed nunc luctus, efficitur justo quis, molestie enim. Fusce et orci ut tortor accumsan maximus. Duis ornare nisl nec massa luctus, eget iaculis ante ornare. Morbi egestas massa est, vitae fringilla sem commodo et. Maecenas a leo ultricies, semper velit at, semper dolor. Quisque hendrerit dui et arcu tempor, vitae tempus risus vestibulum. Maecenas elementum lorem sit amet enim commodo venenatis. Phasellus egestas, mi nec aliquam feugiat, odio quam elementum magna, quis posuere elit augue gravida lectus.
- </p>
- <p>
- Quisque quis nibh tempus, tincidunt turpis eu, commodo magna. Ut gravida fermentum ante, at tincidunt mauris fermentum at. In justo mauris, sodales sit amet nibh a, finibus porttitor enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut mattis ultrices nisi vel hendrerit. Phasellus at aliquet purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ornare dapibus massa, in hendrerit nulla ullamcorper eget. Quisque facilisis sem quam, et viverra ipsum tempor lacinia. Nullam mollis placerat nisl. In id mi consectetur, ullamcorper purus at, egestas magna. Ut quis ipsum placerat, egestas orci vitae, porta lectus. Morbi mi leo, lobortis congue condimentum et, euismod at enim. Pellentesque in cursus tellus. Phasellus posuere eros lorem, a ultrices velit faucibus ac.
- </p>
- <p>
- Ut at varius dui. Nulla consequat elit at magna efficitur pellentesque. Quisque sollicitudin faucibus condimentum. Vivamus felis ipsum, dictum eu nibh in, lobortis rhoncus lectus. Aliquam a lectus ligula. Praesent ac cursus dolor, at faucibus massa. Nunc pharetra fermentum tincidunt. Duis venenatis finibus ultrices. Quisque dictum, massa at consectetur ultrices, sem orci ultricies tellus, in volutpat magna lorem et felis. Duis aliquet dui pretium lorem vulputate dapibus. Nulla facilisi. Nulla augue tellus, euismod in sem sed, fermentum lacinia est. Sed a augue gravida, ullamcorper diam id, tempus ipsum. Phasellus rhoncus a leo id molestie. Nulla facilisi.
- </p>
- <p>
- Proin felis ante, pharetra ut convallis vitae, gravida non turpis. Aenean consequat at tortor et tempus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer ipsum tellus, laoreet a massa sit amet, ultrices dapibus sem. Quisque vel ante vel diam mollis laoreet sit amet non urna. Praesent laoreet, dolor a consequat consectetur, massa arcu efficitur nibh, vitae euismod diam nisi vel urna. Suspendisse malesuada orci rhoncus nunc vulputate, et eleifend purus aliquam.
- </p>
- <p>
- Interdum et malesuada fames ac ante ipsum primis in faucibus. In hac habitasse platea dictumst. Curabitur turpis nunc, consequat nec nulla placerat, ullamcorper congue diam. Cras sit amet felis placerat, feugiat nisl id, tincidunt nunc. Mauris at elementum ex. Donec cursus volutpat semper. Aliquam vel imperdiet ipsum. Nullam mollis eu mauris quis sagittis. Cras accumsan, enim eu vulputate suscipit, sapien eros varius mi, vel vestibulum lectus ligula ullamcorper libero.
- </p>
- <p>
- Vivamus id dolor lobortis, efficitur mi eget, dapibus odio. Vivamus bibendum, enim sit amet facilisis interdum, purus quam finibus sem, eu luctus augue est non augue. Sed rhoncus dignissim lectus, at dignissim ante condimentum a. Morbi a facilisis nulla. Quisque lacinia finibus tincidunt. Aliquam eu ullamcorper dolor. Duis euismod iaculis augue, quis viverra leo rhoncus vitae. Donec nec sem ultrices, venenatis lectus non, viverra metus.
- </p>
- <p>
- Suspendisse venenatis ultricies metus, id porta magna fringilla vestibulum. Maecenas molestie nibh at fringilla feugiat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque risus massa, convallis malesuada pharetra vel, maximus ullamcorper lorem. Aenean justo quam, sodales ut eros vel, congue dapibus neque. Praesent malesuada, sapien a tristique blandit, erat purus cursus nunc, eu tristique sem metus eget augue. Mauris imperdiet lectus diam, eu porta ipsum tempus vel. Nullam ornare orci sed scelerisque ultrices. Aenean massa dolor, gravida ut nulla sit amet, semper pharetra enim. Nulla tortor ipsum, ullamcorper commodo rutrum vel, pellentesque nec ipsum. Maecenas mauris elit, mollis in commodo vel, suscipit et mauris.
- </p>
- </div>
- </div>
- <!-- oestliche Seitenleiste -->
- <div class="ost">
- östliche Seitenleiste
- </div>
- </div>
- <!-- Fusszeile -->
- <div class="sued">
- Fußzeile
- </div>
- </body>
-</html>
diff --git a/web/proto/flex-versuch-up.html b/web/proto/flex-versuch-up.html
deleted file mode 100644
index 5d60d15..0000000
--- a/web/proto/flex-versuch-up.html
+++ /dev/null
@@ -1,256 +0,0 @@
-<!DOCTYPE html>
-<html>
- <head>
- <title>Flexbox Demo</title>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <style>
- html {
- margin: 0;
- padding: 0;
- height: 100%; /* Anmerkung 2 */
- }
- body {
- margin: 0;
- padding: 0;
- height: 100%; /* Anmerkung 2 */
- min-height: 0; /* Anmerkung 1 */
- display: flex;
- flex-flow: column;
- }
- .inhalt {
- display: flex;
- flex-flow: row;
- height: 100%; /* Anmerkung 2 */
- min-height: 0; /* Anmerkung 1 */
- }
- .nord {
- background-color: lightgray;
- }
- .sued {
- background-color: lightgray;
- }
- .west {
- flex-grow: 0;
- flex-shrink: 0;
- flex-basis: 10em;
- background-color: antiquewhite;
- }
- .ost {
- flex-grow: 0;
- flex-shrink: 0;
- flex-basis: 10em;
- background-color: antiquewhite;
- }
- .zentrum {
- width: 100%;
- height: 100%;
- overflow: auto;
- -webkit-overflow-scrolling: touch;
- }
- .lipsum {
- color: lightgrey;
- }
-
- /*
- Anmerkungen:
- 1.) min.height: 0 fuer body und inhalt ist gegen einen Bug, vgl.
- http://stackoverflow.com/questions/33859811/understanding-flexbox-and-overflowauto
- 2.) height 100% fuer html, body und inhalt sorgt dafuer, dass sich alles
- immer ueber das gesamte Browserfenster ausdehnt.
- */
- </style>
- </head>
- <body>
- <!-- Kopfzeile -->
- <div class="nord">
- Kopfzeile
- </div>
- <div class="inhalt">
- <!-- westliche Seitenleiste -->
- <div class="west">
- westliche Seitenleiste
- </div>
-
-
- <!-- zentraler Inhaltsbereich -->
- <div class="zentrum">
- <p>
- Dies ist ein Beispiel für eine Webseite, die ein
- <code>flexbox</code>-Layout für die Anordnung ihrer Inhalte
- nutzt.
- </p>
- <p>
- Der Inhaltsbereich in der Mitte passt sich zur Laufzeit dynamisch
- an die Größe des Browserfensters an. Er wird von einer
- Kopfzeile, einer Fußzeile und zwei Seitenleisten umschlossen
- die eine feste Größe haben.
- </p>
- <p>
- Nachfolgend einiger Text, der das Verhalten des Layouts demonstrieren
- soll, wenn die Textmenge den vorhandenen Raum übersteigt.
- </p>
- <div class="lipsum">
- <p>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac maximus velit. Curabitur tellus lorem, porta bibendum sollicitudin ac, cursus ut nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris non ornare mauris. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent id est nec tellus consequat viverra ut a nunc. Fusce sagittis pulvinar diam, vel ultricies sapien pretium nec. Aliquam ac arcu vehicula ex fringilla cursus.
- </p>
- <p>
- Donec sit amet efficitur nisl. Aliquam rutrum mattis ante quis ultrices. In non blandit ex. Aenean fermentum feugiat orci at malesuada. Sed vitae facilisis erat, at luctus erat. Nulla sodales leo eget sem pretium, elementum porttitor nulla feugiat. Mauris eget lectus a felis finibus condimentum sed et diam. Donec nec nunc sit amet erat feugiat iaculis. Vestibulum sem ante, ornare a hendrerit vel, facilisis et libero. Donec a libero congue, blandit neque mattis, fringilla augue.
- </p>
- <p>
- Mauris et volutpat orci, sodales lacinia neque. Sed quis ex velit. Donec quis urna vel leo tincidunt ultricies. Aliquam neque justo, vestibulum at tristique eget, rhoncus bibendum diam. Phasellus iaculis diam massa, ac euismod massa vulputate et. Quisque sed diam maximus, commodo risus eget, rutrum neque. Vivamus tellus enim, vehicula at erat rhoncus, rutrum sagittis tellus. Nulla ornare, libero in ornare placerat, enim quam finibus ipsum, at dictum augue diam sit amet lacus. Aliquam at lectus ac urna imperdiet dictum.
- </p>
- <p>
- Nullam finibus erat ac dolor vehicula aliquet. Nam pretium ut dolor ut ultricies. Nam posuere ipsum neque, at placerat sem egestas vitae. Curabitur velit dui, ultrices a justo nec, sollicitudin ultricies mi. Ut mauris nisl, pharetra ac lectus sed, finibus pharetra ligula. Praesent eleifend, erat nec cursus feugiat, sapien sem blandit est, eget bibendum metus enim condimentum metus. Etiam ultricies ante et ante molestie tempor quis et orci. Suspendisse auctor turpis nec turpis pulvinar, commodo faucibus neque dapibus. Quisque metus velit, bibendum at varius ut, efficitur mollis massa. Sed molestie mi sed ultricies mollis. Nullam sagittis imperdiet imperdiet. Ut auctor interdum molestie. Aliquam luctus libero magna, ac vulputate massa sollicitudin sed.
- </p>
- <p>
- Praesent at finibus dolor. Praesent feugiat est in enim imperdiet, ut egestas quam fringilla. Vivamus urna ante, interdum a posuere ut, suscipit vitae nisi. Aliquam finibus dolor eget dictum pharetra. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut non commodo nisi. Vivamus pharetra arcu at molestie scelerisque.
- </p>
- <p>
- Donec tincidunt in purus eu feugiat. Duis vitae tincidunt eros, vitae lobortis sem. Integer tempor porta quam, non varius urna congue nec. Nullam accumsan, mi et vehicula gravida, leo ligula tempor leo, vel luctus ligula dui sit amet libero. Cras ac lacinia est, eu luctus tellus. Nullam in vestibulum massa. Suspendisse potenti. Morbi congue nisi et finibus accumsan.
- </p>
- <p>
- Etiam diam augue, porta vel lobortis a, luctus non ligula. Proin elementum vel mi at ultrices. Quisque iaculis tincidunt elit in egestas. Aliquam erat volutpat. Phasellus nec leo eleifend est elementum aliquam at nec sapien. In hac habitasse platea dictumst. Aliquam blandit nunc nec est volutpat, quis lobortis augue pulvinar.
- </p>
- <p>
- Ut ac congue leo. Sed massa felis, ultricies vitae blandit non, euismod eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vitae lobortis magna, in varius nisl. Donec at commodo lectus, sagittis tincidunt mi. Nunc cursus orci in tellus vulputate auctor. Sed iaculis nisi id accumsan venenatis. Suspendisse tincidunt risus ut suscipit molestie. Duis ullamcorper sit amet quam vel sagittis. Ut lacinia mi diam, id semper ipsum auctor quis. Maecenas non metus volutpat, cursus tellus a, blandit tortor. Proin ultricies mauris ut sem dictum, sed fermentum magna rhoncus. Nam id elit nec nisi mollis laoreet eget rhoncus mauris. Suspendisse in lorem lorem. Nam scelerisque condimentum dui dignissim fermentum. Pellentesque congue molestie dignissim.
- </p>
- <p>
- Proin maximus, tortor at tristique sagittis, leo tellus gravida neque, quis efficitur eros leo sed nisl. Vivamus fermentum lobortis magna in consectetur. Vestibulum ipsum purus, rutrum id faucibus sit amet, sagittis eget mauris. Integer ultricies tristique enim. Phasellus ultricies lacinia ipsum, eget hendrerit quam ultrices et. Donec viverra eget massa eu tincidunt. Pellentesque vel ligula semper eros cursus porttitor. Proin pretium magna purus. Duis laoreet est vel gravida finibus. Sed et varius neque, nec tincidunt est. In hac habitasse platea dictumst. Donec placerat ultrices diam at maximus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
- </p>
- <p>
- Nulla vel gravida diam, sed aliquet mauris. Donec pulvinar arcu id consequat tincidunt. Nullam bibendum tellus non finibus tincidunt. Nunc finibus, lorem non ornare efficitur, turpis lacus sodales arcu, ut interdum massa quam in dui. Vivamus turpis nibh, dignissim in lectus vitae, posuere egestas lectus. Ut tincidunt tellus ut risus iaculis bibendum. Cras consequat facilisis risus, vel rhoncus nunc ornare id. Morbi elementum luctus nisl eu interdum. Integer dictum lectus aliquet lorem varius, quis egestas tellus maximus. Nam ex neque, tristique quis ipsum non, porttitor tincidunt augue. Vivamus eu consectetur velit.
- </p>
- <p>
- Donec et imperdiet massa. Morbi cursus, diam ac consequat mattis, ante justo mattis ex, ultrices vulputate erat neque id turpis. Donec vitae purus vitae neque mollis pulvinar. Aenean fermentum dui et enim consequat viverra. Curabitur vel urna ut purus auctor ultricies. Maecenas a tortor nunc. Praesent ornare velit in dui aliquam, id ullamcorper quam aliquet. Aenean id tempor neque. Nulla id semper ipsum. Aliquam sit amet lacus ut orci facilisis viverra. Morbi ut euismod nunc, at fringilla dui. Curabitur mi eros, porta eu tortor eu, feugiat rhoncus purus. Donec ligula leo, vestibulum nec neque vitae, aliquet semper felis.
- </p>
- <p>
- Vivamus rutrum vulputate nunc, non dignissim enim placerat nec. Mauris finibus nisi ac dapibus vehicula. Ut vitae pharetra odio, eu tristique nulla. Vestibulum fringilla orci lacus, non imperdiet mauris venenatis a. In finibus lacus quis malesuada tempus. Sed ac neque ultricies ligula volutpat tempor. Vestibulum sit amet elementum ligula, ut laoreet nibh. Aenean vitae congue velit. Vestibulum vel sapien sem. Praesent consequat libero massa, eu cursus nulla rhoncus a. Suspendisse non sapien nec erat varius varius sit amet ac sem. Aenean ullamcorper cursus nulla, quis euismod dui cursus sed. Vivamus ornare lorem non tortor feugiat volutpat.
- </p>
- <p>
- Praesent viverra in libero vel laoreet. Integer euismod vestibulum mi id efficitur. Pellentesque orci dolor, aliquet vitae accumsan ut, pellentesque eu dolor. Nulla dolor neque, consectetur sed ornare eu, laoreet vehicula purus. Pellentesque tristique, orci vitae feugiat semper, ligula urna rhoncus ipsum, et ullamcorper arcu lorem nec leo. Phasellus tristique dui at purus lacinia rutrum. Cras semper, ipsum non blandit egestas, orci eros malesuada nisl, quis facilisis diam lectus feugiat dolor. Suspendisse potenti.
- </p>
- <p>
- In et malesuada enim. Vestibulum tristique eleifend arcu quis laoreet. Ut nec leo libero. Nunc auctor orci a interdum suscipit. Morbi in metus aliquet magna venenatis ullamcorper ac vel elit. Aliquam malesuada magna ante, quis semper ipsum porta a. Aliquam dolor velit, hendrerit at nibh nec, commodo dictum metus. Quisque sed purus sit amet arcu semper rutrum a ac justo. Aliquam ultrices facilisis est non faucibus.
- </p>
- <p>
- Aliquam tristique lacinia nulla, eu varius est pulvinar ac. Ut maximus hendrerit justo non dignissim. Sed non metus accumsan, dictum mi id, rutrum ligula. In gravida odio velit, ac sollicitudin nunc tempor sit amet. Cras id bibendum dui. Etiam at massa ac diam facilisis congue pulvinar nec mauris. Donec placerat ut nulla et dignissim. Suspendisse potenti. Quisque id quam feugiat, placerat sapien at, porttitor ligula. Vestibulum luctus tellus ac nisl accumsan, vitae scelerisque neque accumsan. Duis vitae ullamcorper sapien, nec ullamcorper sem. Sed ut lectus a metus cursus sollicitudin nec eu nibh. Nunc sit amet aliquet eros, vel luctus ligula. Nam enim nunc, semper eu bibendum quis, laoreet id mauris. Mauris placerat, sapien eget sollicitudin vehicula, leo ipsum laoreet augue, eget convallis dui nisl vel velit.
- </p>
- <p>
- Morbi pharetra porta augue ut commodo. Proin porta dignissim leo ac aliquet. Morbi id tellus at odio pretium bibendum molestie interdum ante. Suspendisse potenti. Nunc pretium lorem vel massa tincidunt elementum. Nulla vulputate ex sit amet felis sodales elementum. Donec ex lacus, posuere consequat sodales in, elementum elementum nisl. Curabitur convallis sapien id lorem sagittis, vel mollis nibh iaculis. Morbi congue tincidunt purus, vel ultrices nibh accumsan vel. Aliquam tristique lacinia urna, eleifend euismod leo varius nec. Sed faucibus id mi a viverra. Nunc nec augue ut nibh luctus varius at at sem. Nam et accumsan sapien. Suspendisse potenti. Donec rutrum sapien id elit accumsan, eget ornare arcu condimentum.
- </p>
- <p>
- Phasellus volutpat purus a pharetra tincidunt. In hac habitasse platea dictumst. Aenean eleifend nec nibh ac rutrum. Maecenas sed pharetra augue, quis posuere ipsum. Praesent scelerisque venenatis arcu nec tempus. Fusce quis pretium lorem. Aenean suscipit auctor tortor, porta porttitor diam scelerisque quis.
- </p>
- <p>
- Aliquam non tellus a est tristique lacinia non quis arcu. Ut faucibus varius erat et tincidunt. Morbi semper mattis gravida. Ut metus orci, blandit id sapien nec, auctor fringilla felis. Donec nisl mauris, pulvinar et ipsum at, finibus consequat magna. Ut at ultrices odio. Quisque at enim at ipsum venenatis rhoncus. Morbi sit amet nunc fermentum, tempus elit in, ornare velit. Donec vehicula mollis dui vitae euismod.
- </p>
- <p>
- Curabitur vel metus malesuada erat dictum vulputate et id est. Vivamus eu tincidunt risus. Suspendisse gravida lectus ut ante varius, at viverra tellus ultricies. Morbi varius purus quis tortor sodales, a pulvinar neque efficitur. Nulla varius, diam et pretium tincidunt, sapien est tempor magna, fermentum dictum dolor nulla nec ligula. Fusce semper nisl sit amet posuere maximus. Donec lacinia lectus sed nisi finibus vestibulum. Nullam venenatis venenatis quam vehicula euismod. Nunc mattis porttitor neque feugiat pellentesque. Interdum et malesuada fames ac ante ipsum primis in faucibus.
- </p>
- <p>
- Suspendisse mollis, dolor quis consectetur eleifend, mi ex tempor arcu, id mollis sem orci vel sapien. Mauris venenatis, orci vel pulvinar ullamcorper, dui diam tincidunt ipsum, eget fringilla risus est placerat urna. Proin iaculis eu massa eget dictum. Aenean et enim quis purus maximus lacinia nec non mauris. Vivamus sollicitudin facilisis lectus, quis lobortis massa suscipit at. Phasellus et enim sed mauris efficitur aliquet. Pellentesque sed nisl eu augue tincidunt lacinia in quis magna. In congue euismod purus, et congue est placerat vitae. Maecenas id neque turpis. Sed tincidunt condimentum orci, et facilisis odio molestie a. Phasellus ut molestie justo. In laoreet tempor maximus. Curabitur eget consectetur est, et condimentum urna.
- </p>
- <p>
- Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque elit nisl, blandit nec eleifend a, eleifend id nunc. Etiam nunc enim, fermentum malesuada sollicitudin nec, pellentesque nec elit. Donec rhoncus semper cursus. Mauris dapibus, ante a tincidunt fringilla, augue nibh interdum sapien, ac imperdiet felis augue ut orci. Integer viverra venenatis elit vitae vulputate. Suspendisse ornare ante eu odio mattis, nec aliquam diam viverra. Aenean volutpat orci enim, vel porta erat condimentum vitae. Nam rhoncus mi eu libero hendrerit, sit amet viverra enim cursus.
- </p>
- <p>
- Duis tincidunt ultricies neque, vel dapibus lectus. Suspendisse et dui et felis tincidunt elementum. Aenean ac lacus tempor, placerat ante vitae, auctor nulla. Cras dignissim tortor quam, nec rhoncus elit consectetur semper. Sed fringilla neque a mi faucibus, ac blandit mauris scelerisque. Donec eu lacinia mauris, sed bibendum sem. Vestibulum consectetur massa non volutpat auctor.
- </p>
- <p>
- Quisque eu lobortis ipsum, vel tempor magna. Sed in vehicula purus. Duis non commodo ligula, vitae posuere urna. Cras at lectus lacinia, vestibulum purus in, accumsan eros. Nam mauris leo, interdum dictum purus non, varius varius lorem. Proin at blandit nibh. Donec id ullamcorper nisl. Aenean id convallis odio, id venenatis leo. Vestibulum venenatis laoreet metus. Donec id sapien malesuada, tempus dolor vel, porttitor nisi. Aliquam eget volutpat magna.
- </p>
- <p>
- Phasellus vel auctor augue. In aliquam purus enim, porta sagittis tellus posuere nec. Fusce at tincidunt nisl. Aenean quis ultrices quam, nec posuere nunc. Curabitur quis eros eu augue auctor semper vel et sem. Etiam fringilla, arcu ut cursus molestie, massa nunc fringilla erat, ac efficitur justo ipsum ut purus. Integer vestibulum ullamcorper dui, vel facilisis purus condimentum gravida. Sed at dolor a tortor molestie feugiat. Proin sagittis convallis mi at pretium. Sed egestas sit amet mauris ac placerat. Ut molestie diam et turpis sagittis suscipit. Sed ullamcorper velit id velit pellentesque, a sagittis nibh tempor. Sed non dolor a lorem efficitur aliquam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec pretium feugiat condimentum.
- </p>
- <p>
- Etiam id placerat velit. Phasellus at pulvinar lectus. Aliquam suscipit vitae lectus vel dapibus. Morbi vel orci at neque blandit egestas. Maecenas at nunc porttitor, pellentesque est quis, egestas nibh. Proin auctor justo non felis laoreet, eu faucibus ligula volutpat. Donec dui dolor, iaculis non hendrerit volutpat, porta ac quam. Integer sed dictum dui, quis tempor felis.
- </p>
- <p>
- Phasellus quis risus non metus sagittis lobortis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut sed elementum odio. Sed ac odio non risus imperdiet dignissim. In ac velit odio. Maecenas sed enim et risus molestie venenatis interdum nec dolor. Cras viverra purus a lorem lobortis ornare. Ut quis nisl porttitor, fringilla odio vitae, accumsan diam. Morbi volutpat egestas diam, ut venenatis turpis. Donec quis dapibus sem, ut viverra lacus. Aliquam efficitur fringilla mi vel rhoncus. Vestibulum neque diam, porta ut scelerisque at, dictum non nunc. Nam purus nisl, facilisis a vulputate nec, hendrerit maximus lorem. Integer leo magna, iaculis a mattis nec, eleifend sed tellus.
- </p>
- <p>
- Curabitur dictum sed risus laoreet commodo. Integer quis tellus lectus. Vivamus nec lectus pulvinar felis tempus auctor ut in ante. Nam ultricies mauris et risus imperdiet, vitae tincidunt augue ullamcorper. Proin feugiat nisi ac diam blandit, ac gravida sapien malesuada. Etiam auctor placerat mattis. In ac leo quis velit efficitur euismod eget eu tellus. Suspendisse ac nibh lobortis, lacinia elit a, sollicitudin nibh. Ut et ligula mattis, commodo sapien quis, tempus lorem. Vivamus pellentesque mauris sit amet sem mattis vestibulum. Pellentesque quis massa maximus, lacinia justo a, auctor massa.
- </p>
- <p>
- Donec ut feugiat dolor. Phasellus eleifend id dui luctus luctus. Fusce ut arcu lectus. Mauris a velit vel purus ultricies dignissim. Duis sagittis sapien sed nisi mollis condimentum vel bibendum ante. Etiam iaculis varius dui eget dictum. In accumsan metus sed feugiat tristique.
- </p>
- <p>
- Suspendisse sit amet ipsum vitae lorem rhoncus interdum. Nam id varius ante. Maecenas mi odio, posuere eu leo eu, ullamcorper commodo urna. Aenean turpis lacus, scelerisque sit amet blandit non, pretium eget nisi. Morbi varius erat sit amet volutpat placerat. Donec ac aliquam ligula. Morbi consectetur interdum leo et suscipit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
- </p>
- <p>
- Nam non quam ullamcorper, tincidunt dui quis, suscipit justo. Aliquam vitae rutrum augue, at semper sem. Suspendisse et molestie felis, eget lacinia est. Etiam id orci et nibh dictum hendrerit non in nunc. Mauris varius augue non sagittis pellentesque. Pellentesque imperdiet dolor enim, vel venenatis augue ultrices quis. Curabitur in dapibus mauris. Nullam cursus suscipit arcu, eu ultrices lorem tempor vel. Ut ante orci, iaculis eu nisl et, consectetur tempor ligula. Sed ultricies, nisl at tristique efficitur, turpis lectus maximus lacus, in aliquet sem orci ac erat. Sed vestibulum imperdiet turpis, id interdum felis molestie sit amet.
- </p>
- <p>
- Ut egestas nulla sit amet arcu molestie, et condimentum nibh volutpat. Sed eu posuere urna. Ut sollicitudin ultrices urna, sed iaculis arcu. Cras in mollis lacus. Nulla pretium magna at dui pulvinar commodo. Aenean tincidunt interdum neque, ut aliquam orci lobortis non. Etiam in nulla dui. Nulla pulvinar, sem in condimentum sollicitudin, ipsum lorem egestas ex, faucibus ullamcorper turpis lectus nec eros. Aliquam velit neque, tristique eleifend mattis sit amet, imperdiet vel leo. Fusce maximus, metus eu tempus vehicula, nunc nulla ornare metus, ut porta dolor leo eu risus. Quisque egestas, lacus eget rutrum mattis, turpis enim venenatis risus, nec hendrerit justo magna sed mi. Nulla eget vulputate elit, ac sodales orci. Sed ultricies, magna a hendrerit vulputate, erat lacus ornare elit, ac rhoncus ipsum tortor ut dolor.
- </p>
- <p>
- Etiam at posuere dolor. Nunc sed mi quis ex rutrum maximus. Cras aliquam massa orci, ullamcorper facilisis leo ornare vel. Morbi et aliquam quam. Nam ut sapien sit amet purus aliquam tincidunt. Proin aliquam pretium orci, ut interdum lacus. Maecenas sit amet vehicula leo, in bibendum purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
- </p>
- <p>
- Duis sit amet orci lacinia, rutrum velit at, venenatis risus. Fusce mauris erat, facilisis ut metus ornare, consequat egestas dui. Proin iaculis pulvinar urna, id mollis velit accumsan a. Nulla eget nulla mi. Aenean ac mauris id velit varius venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam ornare ex at purus rhoncus posuere. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla quis ante a orci pharetra pretium quis nec justo. Aenean pellentesque lorem ac metus finibus, non consectetur leo ullamcorper. Nam eu ex molestie, sagittis quam et, fermentum elit. Integer non faucibus orci. Integer ultricies consequat enim ac malesuada.
- </p>
- <p>
- Ut scelerisque faucibus dictum. In eget nisl at sem consectetur varius eu fermentum dui. Nullam eleifend dictum risus, in luctus odio sagittis ac. Nullam turpis odio, rhoncus eu augue eget, congue porta felis. Donec a efficitur urna. Vivamus diam felis, eleifend eget pretium nec, blandit ut erat. Etiam non nisi at eros congue lacinia. Proin a venenatis nisi. In erat tellus, accumsan at auctor sed, bibendum ac dolor. Cras sapien justo, pellentesque a dictum sit amet, pulvinar posuere sapien. Maecenas sodales finibus faucibus. Nullam fringilla metus velit, et vehicula turpis cursus ut. Curabitur facilisis varius cursus.
- </p>
- <p>
- Ut sodales augue a dictum fermentum. Proin ornare est urna, vitae convallis ante tristique nec. Aliquam sit amet vehicula est, quis ultricies nibh. Nullam varius vel turpis venenatis ultricies. Nullam sit amet ex sem. Nulla sit amet nisl fermentum, tincidunt magna et, vehicula libero. Nullam interdum nisi eros, vel molestie metus aliquet ut. Nam feugiat condimentum nulla sed convallis. Nunc ac orci ex. Praesent fringilla nunc velit, accumsan tincidunt nibh hendrerit dignissim. In porta purus in libero facilisis, sit amet finibus leo vehicula. Cras consequat odio hendrerit quam convallis auctor. Suspendisse arcu enim, imperdiet accumsan ante a, ornare posuere nisl.
- </p>
- <p>
- Phasellus augue massa, imperdiet at mauris at, mattis volutpat nulla. Pellentesque posuere scelerisque sagittis. Quisque ornare egestas tincidunt. Vestibulum euismod eros et risus porttitor, vitae sagittis erat condimentum. Nam pretium nunc at condimentum semper. Morbi at ligula pretium, tincidunt massa id, imperdiet velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis vel leo malesuada purus egestas venenatis. Vestibulum in nibh tincidunt, egestas massa a, ultricies ipsum. Morbi sollicitudin justo venenatis nulla volutpat condimentum. Donec ut consectetur enim. Nullam fringilla vitae mauris ac condimentum. Ut pharetra tincidunt lorem, ornare bibendum urna dignissim sed. Vivamus faucibus nisi posuere varius mollis.
- </p>
- <p>
- Nullam ex dui, tincidunt ac suscipit eget, pretium ac massa. Integer euismod gravida eros nec porttitor. Aenean vitae nibh purus. Nunc ligula mi, placerat eget leo a, commodo fermentum lacus. In vestibulum augue quis nulla consectetur ornare. Nam quis sapien id nibh placerat imperdiet suscipit sit amet augue. Morbi at dapibus eros, et dapibus massa. Nam in nisl eros. Proin vel tincidunt dolor. Aliquam non mi in neque pharetra finibus. Nulla nisl risus, pulvinar quis sapien sit amet, ultricies dictum ligula. Suspendisse in urna ac metus mattis laoreet. In auctor vehicula imperdiet.
- </p>
- <p>
- Curabitur enim quam, fringilla ut justo tempor, hendrerit tincidunt velit. Quisque non orci erat. Ut tempor malesuada ex, vitae blandit erat scelerisque non. Nulla a velit blandit, gravida lectus quis, egestas ex. Duis in lacus sodales, lobortis tortor et, dictum dui. In eget elementum nisi, quis convallis erat. Pellentesque quis varius velit.
- </p>
- <p>
- Nam vitae feugiat diam. Proin fermentum condimentum consectetur. Cras ut gravida tellus, nec sagittis justo. Mauris eu orci in ante rutrum cursus sit amet eget sem. Integer vitae elit nec nibh convallis vestibulum. Vivamus dui turpis, sodales et orci sit amet, pellentesque lobortis odio. Donec commodo arcu a nunc elementum, id cursus nunc ullamcorper. Sed ac lectus sit amet est aliquet maximus. Donec hendrerit condimentum mauris, vitae facilisis risus fermentum sed. Donec sodales porttitor diam vel laoreet. Donec sed massa tincidunt, maximus odio eu, eleifend turpis. Morbi volutpat posuere erat ut cursus.
- </p>
- <p>
- In hac habitasse platea dictumst. Vivamus a orci rutrum, bibendum velit id, rhoncus nulla. Nulla ac blandit felis. Nulla auctor turpis nisi, id sagittis enim posuere id. Sed fermentum at ante at pretium. Curabitur ante mi, suscipit eu efficitur id, pellentesque vitae lectus. Praesent sed molestie dolor.
- </p>
- <p>
- In condimentum bibendum arcu, sit amet dignissim justo fermentum in. Aenean placerat, sapien vel mollis efficitur, mi justo bibendum leo, et pretium diam augue condimentum odio. Proin sed nibh blandit, consectetur eros quis, commodo est. Nunc porta vestibulum quam eu ullamcorper. Sed tempus justo nunc, mattis accumsan lorem aliquet sed. Vestibulum volutpat nulla vel tristique tempus. Aenean facilisis ex id sapien rhoncus, sit amet iaculis nisl cursus. Nam imperdiet erat ac luctus pellentesque. Donec laoreet cursus lorem. Suspendisse hendrerit varius tincidunt. Mauris at eros auctor risus pharetra fermentum in a nulla. Nunc nec pellentesque quam. Phasellus at vestibulum turpis, id rhoncus tellus.
- </p>
- <p>
- Donec eget fringilla odio, scelerisque molestie ligula. Duis ultricies semper massa vel laoreet. Nam pretium vel lorem sed tempus. Cras justo odio, suscipit vel feugiat a, pharetra ac nulla. Quisque porta nisl vel mattis efficitur. Vivamus nibh arcu, iaculis quis turpis non, malesuada vestibulum lectus. Quisque nec leo ac lorem imperdiet ornare ac vulputate ipsum. Suspendisse luctus, lectus at gravida pretium, odio quam malesuada est, at molestie velit nulla eget nulla. Nullam varius ut neque et sagittis. Mauris tristique consequat congue. Nulla facilisi. Pellentesque tincidunt ex quis diam cursus pulvinar.
- </p>
- <p>
- Aliquam bibendum enim sit amet neque bibendum, eu egestas neque consequat. Aliquam est quam, scelerisque in mauris ac, placerat tristique nunc. Quisque gravida, massa eget fringilla elementum, odio quam elementum eros, eu hendrerit ante dolor a massa. Praesent pellentesque augue lectus, sit amet auctor augue egestas quis. Vivamus mollis, mauris hendrerit tempor congue, nisi tellus tempus velit, eget pellentesque sapien ipsum ut elit. Nam ac velit vitae augue auctor congue. Proin at cursus dui. Integer non urna ut odio porta mattis pellentesque eu tortor. Mauris sodales arcu ut ultrices faucibus. In lacus urna, semper vel ullamcorper semper, consectetur vitae quam.
- </p>
- <p>
- Vestibulum sed nunc luctus, efficitur justo quis, molestie enim. Fusce et orci ut tortor accumsan maximus. Duis ornare nisl nec massa luctus, eget iaculis ante ornare. Morbi egestas massa est, vitae fringilla sem commodo et. Maecenas a leo ultricies, semper velit at, semper dolor. Quisque hendrerit dui et arcu tempor, vitae tempus risus vestibulum. Maecenas elementum lorem sit amet enim commodo venenatis. Phasellus egestas, mi nec aliquam feugiat, odio quam elementum magna, quis posuere elit augue gravida lectus.
- </p>
- <p>
- Quisque quis nibh tempus, tincidunt turpis eu, commodo magna. Ut gravida fermentum ante, at tincidunt mauris fermentum at. In justo mauris, sodales sit amet nibh a, finibus porttitor enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut mattis ultrices nisi vel hendrerit. Phasellus at aliquet purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ornare dapibus massa, in hendrerit nulla ullamcorper eget. Quisque facilisis sem quam, et viverra ipsum tempor lacinia. Nullam mollis placerat nisl. In id mi consectetur, ullamcorper purus at, egestas magna. Ut quis ipsum placerat, egestas orci vitae, porta lectus. Morbi mi leo, lobortis congue condimentum et, euismod at enim. Pellentesque in cursus tellus. Phasellus posuere eros lorem, a ultrices velit faucibus ac.
- </p>
- <p>
- Ut at varius dui. Nulla consequat elit at magna efficitur pellentesque. Quisque sollicitudin faucibus condimentum. Vivamus felis ipsum, dictum eu nibh in, lobortis rhoncus lectus. Aliquam a lectus ligula. Praesent ac cursus dolor, at faucibus massa. Nunc pharetra fermentum tincidunt. Duis venenatis finibus ultrices. Quisque dictum, massa at consectetur ultrices, sem orci ultricies tellus, in volutpat magna lorem et felis. Duis aliquet dui pretium lorem vulputate dapibus. Nulla facilisi. Nulla augue tellus, euismod in sem sed, fermentum lacinia est. Sed a augue gravida, ullamcorper diam id, tempus ipsum. Phasellus rhoncus a leo id molestie. Nulla facilisi.
- </p>
- <p>
- Proin felis ante, pharetra ut convallis vitae, gravida non turpis. Aenean consequat at tortor et tempus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer ipsum tellus, laoreet a massa sit amet, ultrices dapibus sem. Quisque vel ante vel diam mollis laoreet sit amet non urna. Praesent laoreet, dolor a consequat consectetur, massa arcu efficitur nibh, vitae euismod diam nisi vel urna. Suspendisse malesuada orci rhoncus nunc vulputate, et eleifend purus aliquam.
- </p>
- <p>
- Interdum et malesuada fames ac ante ipsum primis in faucibus. In hac habitasse platea dictumst. Curabitur turpis nunc, consequat nec nulla placerat, ullamcorper congue diam. Cras sit amet felis placerat, feugiat nisl id, tincidunt nunc. Mauris at elementum ex. Donec cursus volutpat semper. Aliquam vel imperdiet ipsum. Nullam mollis eu mauris quis sagittis. Cras accumsan, enim eu vulputate suscipit, sapien eros varius mi, vel vestibulum lectus ligula ullamcorper libero.
- </p>
- <p>
- Vivamus id dolor lobortis, efficitur mi eget, dapibus odio. Vivamus bibendum, enim sit amet facilisis interdum, purus quam finibus sem, eu luctus augue est non augue. Sed rhoncus dignissim lectus, at dignissim ante condimentum a. Morbi a facilisis nulla. Quisque lacinia finibus tincidunt. Aliquam eu ullamcorper dolor. Duis euismod iaculis augue, quis viverra leo rhoncus vitae. Donec nec sem ultrices, venenatis lectus non, viverra metus.
- </p>
- <p>
- Suspendisse venenatis ultricies metus, id porta magna fringilla vestibulum. Maecenas molestie nibh at fringilla feugiat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque risus massa, convallis malesuada pharetra vel, maximus ullamcorper lorem. Aenean justo quam, sodales ut eros vel, congue dapibus neque. Praesent malesuada, sapien a tristique blandit, erat purus cursus nunc, eu tristique sem metus eget augue. Mauris imperdiet lectus diam, eu porta ipsum tempus vel. Nullam ornare orci sed scelerisque ultrices. Aenean massa dolor, gravida ut nulla sit amet, semper pharetra enim. Nulla tortor ipsum, ullamcorper commodo rutrum vel, pellentesque nec ipsum. Maecenas mauris elit, mollis in commodo vel, suscipit et mauris.
- </p>
- </div>
- </div>
- <!-- oestliche Seitenleiste -->
- <div class="ost">
- östliche Seitenleiste
- </div>
- </div>
- <!-- Fusszeile -->
- <div class="sued">
- Fußzeile
- </div>
- </body>
-</html>
diff --git a/web/proto/index.html b/web/proto/index.html
deleted file mode 100644
index 91318a4..0000000
--- a/web/proto/index.html
+++ /dev/null
@@ -1,112 +0,0 @@
-<!DOCTYPE html>
-<html>
- <head>
- <title>Flexbox Demo</title>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <link rel="stylesheet" type="text/css" href="/jslib/bootstrap/css/bootstrap.min.css">
- <link rel="stylesheet" type="text/css" href="/jslib/font-awesome/css/font-awesome.min.css">
- <link rel="stylesheet" type="text/css" href="stile.css">
- </head>
- <body>
- <!-- Kopfzeile -->
- <div class="nord">
-
- <div id="menue"> <!-- Menue -->
- <ul class="nav">
- <li class="nav-item dropdown">
- <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Verwaltung</a>
- <div class="dropdown-menu">
- <a class="dropdown-item" href="/">WebBox</a>
- <div class="dropdown-divider"></div>
- <a class="dropdown-item" href="/wbx/mng">Apps</a>
- <a class="dropdown-item" href="/um/ui">Benutzer</a>
- </div>
- </li>
- <li class="nav-item dropdown">
- <a id="userMenu" class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
- <div class="dropdown-menu">
- <a id="logout" class="dropdown-item" href="#">Abmelden</a>
- </div>
- </li>
- </ul>
- </div> <!-- Menue -->
-
- </div>
- <div class="inhalt">
- <!-- westliche Seitenleiste -->
- <div class="west hidden-xs-down">
- <!-- linke Seitenleiste mit Links -->
- <nav class="nav flex-column">
- <a class="nav-link active" href="#">Active</a>
- <a class="nav-link" href="#">Link</a>
- <a class="nav-link" href="#">Link</a>
- <a class="nav-link disabled" href="#">Disabled</a>
- </nav>
- </div>
- <!-- zentraler Inhaltsbereich -->
- <div class="zentrum">
- <div class="zentrum-bc">
- <nav class="breadcrumb">
- <a class="breadcrumb-item" href="#">Home</a>
- <a class="breadcrumb-item" href="#">Library</a>
- <a class="breadcrumb-item" href="#">Data</a>
- <span class="breadcrumb-item active">Bootstrap</span>
- <div class="pull-right align-middle">
- <i class="fa fa-th-large"></i>
- </div>
- </nav>
- </div>
- <div class="zentrum-liste">
- <figure class="figure datei-figure text-center text-warning align-top">
- <i class="fa fa-folder fa-3x"></i>
- <figcaption class="figure-caption">Kurzer Text</figcaption>
- </figure>
- <figure class="figure datei-figure text-center text-warning align-top">
- <i class="fa fa-folder fa-3x"></i>
- <figcaption class="figure-caption">A caption for the above image.</figcaption>
- </figure>
- <figure class="figure datei-figure text-center text-warning align-top">
- <i class="fa fa-folder fa-3x"></i>
- <figcaption class="figure-caption">Ein ganz langer Text, der dieses Element benennt.</figcaption>
- </figure>
- <figure class="figure datei-figure text-center text-warning align-top">
- <i class="fa fa-folder fa-3x"></i>
- <figcaption class="figure-caption">Wort</figcaption>
- </figure>
- <figure class="figure datei-figure text-center text-warning align-top">
- <i class="fa fa-folder fa-3x"></i>
- <figcaption class="figure-caption">Wort2</figcaption>
- </figure>
- <figure class="figure datei-figure text-center text-warning align-top">
- <i class="fa fa-folder fa-3x"></i>
- <figcaption class="figure-caption">Wort3</figcaption>
- </figure>
- </div>
- </div>
- <!-- oestliche Seitenleiste -->
- <!--
- <div class="ost">
- östliche Seitenleiste
- </div>
- -->
- </div>
- <!-- Fusszeile -->
- <!--
- <div class="sued">
- Fußzeile
- </div>
- -->
- <!-- Skripte -->
- <script src="/jslib/jquery/jquery.min.js"></script>
- <script src="/jslib/bootstrap/js/bootstrap.min.js"></script>
- <script src="/jslib/mustache/mustache.min.js"></script>
- <script src="ui.js"></script>
- <script type="text/javascript" charset="utf-8">
- //var ui;
- $(document).ready(function() {
- // init
- });
- </script>
- </body>
-</html>
diff --git a/web/proto/liste4.html b/web/proto/liste4.html
deleted file mode 100644
index 201fe5f..0000000
--- a/web/proto/liste4.html
+++ /dev/null
@@ -1,199 +0,0 @@
-<!DOCTYPE html>
-<html>
- <head>
- <title>Flexbox Demo</title>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <link rel="stylesheet" type="text/css" href="/jslib/bootstrap/css/bootstrap.min.css">
- <link rel="stylesheet" type="text/css" href="/jslib/font-awesome/css/font-awesome.min.css">
- <link rel="stylesheet" type="text/css" href="stile.css">
- </head>
- <body>
- <!-- Kopfzeile -->
- <div class="nord">
-
- <div id="menue"> <!-- Menue -->
- <ul class="nav">
- <li class="nav-item dropdown">
- <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Verwaltung</a>
- <div class="dropdown-menu">
- <a class="dropdown-item" href="/">WebBox</a>
- <div class="dropdown-divider"></div>
- <a class="dropdown-item" href="/wbx/mng">Apps</a>
- <a class="dropdown-item" href="/um/ui">Benutzer</a>
- </div>
- </li>
- <li class="nav-item dropdown">
- <a id="userMenu" class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
- <div class="dropdown-menu">
- <a id="logout" class="dropdown-item" href="#">Abmelden</a>
- </div>
- </li>
- </ul>
- </div> <!-- Menue -->
-
- </div>
- <div class="inhalt">
- <!-- westliche Seitenleiste -->
- <div class="west hidden-xs-down">
- <!-- linke Seitenleiste mit Links -->
- <nav class="nav flex-column">
- <a class="nav-link active" href="#">Active</a>
- <a class="nav-link" href="#">Link</a>
- <a class="nav-link" href="#">Link</a>
- <a class="nav-link disabled" href="#">Disabled</a>
- </nav>
- </div>
- <!-- zentraler Inhaltsbereich -->
- <div class="zentrum">
- <div class="zentrum-bc">
- <nav class="breadcrumb">
- <a class="breadcrumb-item" href="#">Home</a>
- <a class="breadcrumb-item" href="#">Library</a>
- <a class="breadcrumb-item" href="#">Data</a>
- <span class="breadcrumb-item active">Bootstrap</span>
- <div class="pull-right align-middle">
- <i class="fa fa-th-large"></i>
- </div>
- </nav>
- </div>
- <div class="zentrum-liste">
- <table class="table table-hover table-sm table-responsive tableBodyScroll">
- <thead>
- <tr>
- <th colspan="2">Name</th>
- <th>Größe</th>
- <th>Art</th>
- <th>geändert</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td><i class="fa fa-folder-o"></i></td>
- <td>Ordner 1</td>
- <td>4 Objekte</td>
- <td>Ordner</td>
- <td>14.02.2017</td>
- </tr>
- <tr>
- <td><i class="fa fa-file-o"></i></td>
- <td>Datei 1</td>
- <td>6 kB</td>
- <td>Text</td>
- <td>12.02.2017</td>
- </tr>
- <tr>
- <td><i class="fa fa-file-o"></i></td>
- <td>Datei 2</td>
- <td>20 MB</td>
- <td>Text</td>
- <td>16.10.2016</td>
- </tr>
-
- <tr>
- <td><i class="fa fa-file-o"></i></td>
- <td>Datei 2</td>
- <td>20 MB</td>
- <td>Text</td>
- <td>16.10.2016</td>
- </tr>
- <tr>
- <td><i class="fa fa-file-o"></i></td>
- <td>Datei 2</td>
- <td>20 MB</td>
- <td>Text</td>
- <td>16.10.2016</td>
- </tr>
- <tr>
- <td><i class="fa fa-file-o"></i></td>
- <td>Datei 2</td>
- <td>20 MB</td>
- <td>Text</td>
- <td>16.10.2016</td>
- </tr>
- <tr>
- <td><i class="fa fa-file-o"></i></td>
- <td>Datei 2</td>
- <td>20 MB</td>
- <td>Text</td>
- <td>16.10.2016</td>
- </tr>
- <tr>
- <td><i class="fa fa-file-o"></i></td>
- <td>Datei 2</td>
- <td>20 MB</td>
- <td>Text</td>
- <td>16.10.2016</td>
- </tr>
- <tr>
- <td><i class="fa fa-file-o"></i></td>
- <td>Datei 2</td>
- <td>20 MB</td>
- <td>Text</td>
- <td>16.10.2016</td>
- </tr>
- <tr>
- <td><i class="fa fa-file-o"></i></td>
- <td>Datei 2</td>
- <td>20 MB</td>
- <td>Text</td>
- <td>16.10.2016</td>
- </tr>
- <tr>
- <td><i class="fa fa-file-o"></i></td>
- <td>Datei 2</td>
- <td>20 MB</td>
- <td>Text</td>
- <td>16.10.2016</td>
- </tr>
- <tr>
- <td><i class="fa fa-file-o"></i></td>
- <td>Datei 2</td>
- <td>20 MB</td>
- <td>Text</td>
- <td>16.10.2016</td>
- </tr>
- <tr>
- <td><i class="fa fa-file-o"></i></td>
- <td>Datei 2</td>
- <td>20 MB</td>
- <td>Text</td>
- <td>16.10.2016</td>
- </tr>
- <tr>
- <td><i class="fa fa-file-o"></i></td>
- <td>Datei 2</td>
- <td>20 MB</td>
- <td>Text</td>
- <td>16.10.2016</td>
- </tr>
- </tbody>
- </table>
- </div>
- </div>
- <!-- oestliche Seitenleiste -->
- <!--
- <div class="ost">
- östliche Seitenleiste
- </div>
- -->
- </div>
- <!-- Fusszeile -->
- <!--
- <div class="sued">
- Fußzeile
- </div>
- -->
- <!-- Skripte -->
- <script src="/jslib/jquery/jquery.min.js"></script>
- <script src="/jslib/bootstrap/js/bootstrap.min.js"></script>
- <script src="/jslib/mustache/mustache.min.js"></script>
- <script src="ui.js"></script>
- <script type="text/javascript" charset="utf-8">
- //var ui;
- $(document).ready(function() {
- // init
- });
- </script>
- </body>
-</html>
diff --git a/web/proto/stile.css b/web/proto/stile.css
deleted file mode 100644
index aedae23..0000000
--- a/web/proto/stile.css
+++ /dev/null
@@ -1,58 +0,0 @@
-
-
-
-/* Stile Listenansicht */
-
-html {
- margin: 0;
- padding: 0;
- height: 100%; /* Anmerkung 2 */
-}
-body {
- margin: 0;
- padding: 0;
- height: 100%; /* Anmerkung 2 */
- min-height: 0; /* Anmerkung 1 */
- display: flex;
- flex-flow: column;
-}
-.inhalt {
- display: flex;
- flex-flow: row;
- height: 100%; /* Anmerkung 2 */
- min-height: 0; /* Anmerkung 1 */
-}
-.nord {
-
-}
-.sued {
- background-color: lightgray;
-}
-.west {
- flex-grow: 0;
- flex-shrink: 0;
- flex-basis: 10em;
-}
-.ost {
- flex-grow: 0;
- flex-shrink: 0;
- flex-basis: 10em;
- background-color: antiquewhite;
-}
-.zentrum {
- width: 100%;
- height: 100%;
- display: flex;
- flex-flow: column;
-}
-.zentrum-bc {
-}
-.zentrum-liste {
- width: 100%;
- height: 100%;
- overflow: auto;
- -webkit-overflow-scrolling: touch;
-}
-.datei-figure {
- width: 6em;
-}
diff --git a/web/proto/ui.js b/web/proto/ui.js
deleted file mode 100644
index 31f3e6d..0000000
--- a/web/proto/ui.js
+++ /dev/null
@@ -1,5 +0,0 @@
-
-
-function fm_init() {
-
-}
\ No newline at end of file
diff --git a/web/proto/verworfen/flex-versuch-2.css b/web/proto/verworfen/flex-versuch-2.css
deleted file mode 100644
index bc04eec..0000000
--- a/web/proto/verworfen/flex-versuch-2.css
+++ /dev/null
@@ -1,17 +0,0 @@
-
-html, body {
- height: 100%;
-}
-
-#inhalt {
- height: 100%;
- display: flex;
- flex-flow: column;
- background-color: lightgrey;
-}
-
-#spalten {
- height: 100%;
- display: flex;
- flex-flow: row;
-}
\ No newline at end of file
diff --git a/web/proto/verworfen/flex-versuch-2.html b/web/proto/verworfen/flex-versuch-2.html
deleted file mode 100644
index 7399dfb..0000000
--- a/web/proto/verworfen/flex-versuch-2.html
+++ /dev/null
@@ -1,53 +0,0 @@
-<!DOCTYPE html>
-<html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Prototyp Flex-Versuch</title>
- <link rel="stylesheet" type="text/css" href="/jslib/bootstrap/css/bootstrap.min.css">
- <link rel="stylesheet" type="text/css" href="/jslib/font-awesome/css/font-awesome.min.css">
- <link rel="stylesheet" type="text/css" href="flex-versuch-2.css">
- <script id="tpl-list" type="x-tmpl-mustache">
- {{#List}}
- {{#List}}
- <option value="{{ String }}">{{ String }}</option>'
- {{/List}}
- {{/List}}
- </script>
- </head>
- <body>
- <!-- Anfang Body -->
-
- <!-- Anfang Inhalt -->
-
- <div id="inhalt">
- <div class="bg-warning">
- <p>Kopfbereich</p>
- </div>
- <div id="spalten">
- <div class="bg-success">
- <p>Spalte links</p>
- </div>
- <div class="bg-info">
- <p>Spalte rechts</p>
- </div>
- </div>
- </div>
-
- <!-- Ende Inhalt -->
-
- <!-- Skripte -->
- <script src="/jslib/jquery/jquery.min.js"></script>
- <script src="/jslib/bootstrap/js/bootstrap.min.js"></script>
- <script src="/jslib/mustache/mustache.min.js"></script>
- <script src="ui.js"></script>
- <script type="text/javascript" charset="utf-8">
- //var ui;
- $(document).ready(function() {
- // hier kann man etwas initialisieren
- });
- </script>
-
- <!-- Ende Body -->
- </body>
-</html>
diff --git a/web/proto/verworfen/flex-versuch.css b/web/proto/verworfen/flex-versuch.css
deleted file mode 100644
index 7b632d1..0000000
--- a/web/proto/verworfen/flex-versuch.css
+++ /dev/null
@@ -1,8 +0,0 @@
-
-html, body {
- height: 100%;
-}
-
-#inhalt {
- background-color: lightgrey;
-}
\ No newline at end of file
diff --git a/web/proto/verworfen/flex-versuch.html b/web/proto/verworfen/flex-versuch.html
deleted file mode 100644
index 01107fc..0000000
--- a/web/proto/verworfen/flex-versuch.html
+++ /dev/null
@@ -1,55 +0,0 @@
-<!DOCTYPE html>
-<html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Prototyp Flex-Versuch</title>
- <link rel="stylesheet" type="text/css" href="/jslib/bootstrap/css/bootstrap.min.css">
- <link rel="stylesheet" type="text/css" href="/jslib/font-awesome/css/font-awesome.min.css">
- <link rel="stylesheet" type="text/css" href="flex-versuch.css">
- <script id="tpl-list" type="x-tmpl-mustache">
- {{#List}}
- {{#List}}
- <option value="{{ String }}">{{ String }}</option>'
- {{/List}}
- {{/List}}
- </script>
- </head>
- <body>
- <!-- Anfang Body -->
-
- <!-- Anfang Inhalt -->
-
- <div id="inhalt" class="d-flex flex-column h-100">
- <div class="bg-warning">
- <p>Kopfbereich</p>
- </div>
- <div class="bg-faded h-100">
- <div class="d-flex flex-row h-100">
- <div class="bg-success">
- <p>Spalte links</p>
- </div>
- <div class="bg-info">
- <p>Spalte rechts</p>
- </div>
- </div>
- </div>
- </div>
-
- <!-- Ende Inhalt -->
-
- <!-- Skripte -->
- <script src="/jslib/jquery/jquery.min.js"></script>
- <script src="/jslib/bootstrap/js/bootstrap.min.js"></script>
- <script src="/jslib/mustache/mustache.min.js"></script>
- <script src="ui.js"></script>
- <script type="text/javascript" charset="utf-8">
- //var ui;
- $(document).ready(function() {
- // hier kann man etwas initialisieren
- });
- </script>
-
- <!-- Ende Body -->
- </body>
-</html>
diff --git a/web/proto/verworfen/index_alt.html b/web/proto/verworfen/index_alt.html
deleted file mode 100644
index a7a6dfe..0000000
--- a/web/proto/verworfen/index_alt.html
+++ /dev/null
@@ -1,142 +0,0 @@
-<!DOCTYPE html>
-<html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Prototyp Dateiverwaltung</title>
- <link rel="stylesheet" type="text/css" href="/jslib/bootstrap/css/bootstrap.min.css">
- <link rel="stylesheet" type="text/css" href="/jslib/font-awesome/css/font-awesome.min.css">
- <link rel="stylesheet" type="text/css" href="stile.css">
- <script id="tpl-list" type="x-tmpl-mustache">
- {{#List}}
- {{#List}}
- <option value="{{ String }}">{{ String }}</option>'
- {{/List}}
- {{/List}}
- </script>
- </head>
- <body>
-
- <!-- Menue -->
- <div id="menue">
- <ul class="nav">
- <li class="nav-item dropdown">
- <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Verwaltung</a>
- <div class="dropdown-menu">
- <a class="dropdown-item" href="/">WebBox</a>
- <div class="dropdown-divider"></div>
- <a class="dropdown-item" href="/wbx/mng">Apps</a>
- <a class="dropdown-item" href="/um/ui">Benutzer</a>
- </div>
- </li>
- <li class="nav-item dropdown">
- <a id="userMenu" class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
- <div class="dropdown-menu">
- <a id="logout" class="dropdown-item" href="#">Abmelden</a>
- </div>
- </li>
- </ul>
- </div>
-
-
- <!-- Inhalt -->
- <div class="container-fluid" id="inhalt">
-
- <div class="row">
- <div class="col-sm-2 col-md-2 col-lg-2 hidden-xs-down">
- <!-- linke Seitenleiste mit Links -->
- <nav class="nav flex-column">
- <a class="nav-link active" href="#">Active</a>
- <a class="nav-link" href="#">Link</a>
- <a class="nav-link" href="#">Link</a>
- <a class="nav-link disabled" href="#">Disabled</a>
- </nav>
- </div>
- <div class="col-sm-10 col-md-10 col-lg-10">
-
- <nav class="breadcrumb">
- <a class="breadcrumb-item" href="#">Home</a>
- <a class="breadcrumb-item" href="#">Library</a>
- <a class="breadcrumb-item" href="#">Data</a>
- <span class="breadcrumb-item active">Bootstrap</span>
- <div class="pull-right align-middle">
- <i class="fa fa-th-list"></i>
- </div>
- </nav>
-
- <div class="row">
- <div class="col-sm-4 col-md-3 col-lg-2 col-xl-2">
- <figure class="figure text-center text-warning">
- <i class="fa fa-folder-o fa-3x"></i>
- <figcaption class="figure-caption">A caption for the above image.</figcaption>
- </figure>
- </div>
- <div class="col-sm-4 col-md-3 col-lg-2 col-xl-2">
- <figure class="figure text-center bg-warning text-primary">
- <i class="fa fa-folder-o fa-3x"></i>
- <figcaption class="figure-caption text-primary">A caption for the above image.</figcaption>
- </figure>
- </div>
- <div class="col-sm-4 col-md-3 col-lg-2 col-xl-2">
- <figure class="figure text-center text-warning">
- <i class="fa fa-folder-o fa-3x"></i>
- <figcaption class="figure-caption">A caption for the above image.</figcaption>
- </figure>
- </div>
- <div class="col-sm-4 col-md-3 col-lg-2 col-xl-2">
- <figure class="figure text-center text-warning">
- <i class="fa fa-folder-o fa-3x"></i>
- <figcaption class="figure-caption">A caption for the above image.</figcaption>
- </figure>
- </div>
- <div class="col-sm-4 col-md-3 col-lg-2 col-xl-2">
- <figure class="figure text-center text-warning">
- <i class="fa fa-folder-o fa-3x"></i>
- <figcaption class="figure-caption">A caption for the above image.</figcaption>
- </figure>
- </div>
- <div class="col-sm-4 col-md-3 col-lg-2 col-xl-2">
- <figure class="figure text-center text-warning">
- <i class="fa fa-folder-o fa-3x"></i>
- <figcaption class="figure-caption">A caption for the above image.</figcaption>
- </figure>
- </div>
- <div class="col-sm-4 col-md-3 col-lg-2 col-xl-2">
- <figure class="figure text-center text-warning">
- <i class="fa fa-folder-o fa-3x"></i>
- <figcaption class="figure-caption">A caption for the above image.</figcaption>
- </figure>
- </div>
- <div class="col-sm-4 col-md-3 col-lg-2 col-xl-2">
- <figure class="figure text-center text-warning">
- <i class="fa fa-folder-o fa-3x"></i>
- <figcaption class="figure-caption">A caption for the above image.</figcaption>
- </figure>
- </div>
- <div class="col-sm-4 col-md-3 col-lg-2 col-xl-2">
- <figure class="figure text-center text-warning">
- <i class="fa fa-folder-o fa-3x"></i>
- <figcaption class="figure-caption">A caption for the above image.</figcaption>
- </figure>
- </div>
- </div>
-
- </div>
- </div>
- </div>
-
- <!-- Skripte -->
- <script src="/jslib/jquery/jquery.min.js"></script>
- <script src="/jslib/bootstrap/js/bootstrap.min.js"></script>
- <script src="/jslib/mustache/mustache.min.js"></script>
- <script src="ui.js"></script>
- <script type="text/javascript" charset="utf-8">
- //var ui;
- $(document).ready(function() {
- fm_init();
- });
- </script>
-
- <!-- Ende Body -->
- </body>
-</html>
diff --git a/web/proto/verworfen/liste.html b/web/proto/verworfen/liste.html
deleted file mode 100644
index a2d3901..0000000
--- a/web/proto/verworfen/liste.html
+++ /dev/null
@@ -1,203 +0,0 @@
-<!DOCTYPE html>
-<html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Prototyp Dateiverwaltung</title>
- <link rel="stylesheet" type="text/css" href="/jslib/bootstrap/css/bootstrap.min.css">
- <link rel="stylesheet" type="text/css" href="/jslib/font-awesome/css/font-awesome.min.css">
- <link rel="stylesheet" type="text/css" href="stile.css">
- <script id="tpl-list" type="x-tmpl-mustache">
- {{#List}}
- {{#List}}
- <option value="{{ String }}">{{ String }}</option>'
- {{/List}}
- {{/List}}
- </script>
- </head>
- <body>
-
- <div class="alles">
- <!-- Menue -->
- <div id="menue">
- <ul class="nav">
- <li class="nav-item dropdown">
- <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Verwaltung</a>
- <div class="dropdown-menu">
- <a class="dropdown-item" href="/">WebBox</a>
- <div class="dropdown-divider"></div>
- <a class="dropdown-item" href="/wbx/mng">Apps</a>
- <a class="dropdown-item" href="/um/ui">Benutzer</a>
- </div>
- </li>
- <li class="nav-item dropdown">
- <a id="userMenu" class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
- <div class="dropdown-menu">
- <a id="logout" class="dropdown-item" href="#">Abmelden</a>
- </div>
- </li>
- </ul>
- </div>
-
-
- <!-- Inhalt -->
- <div class="container-fluid" id="inhalt">
-
- <div class="row">
- <div class="col-sm-2 col-md-2 col-lg-2 hidden-xs-down">
- <!-- linke Seitenleiste mit Links -->
- <nav class="nav flex-column">
- <a class="nav-link active" href="#">Active</a>
- <a class="nav-link" href="#">Link</a>
- <a class="nav-link" href="#">Link</a>
- <a class="nav-link disabled" href="#">Disabled</a>
- </nav>
- </div>
- <div class="col-sm-10 col-md-10 col-lg-10">
-
- <nav class="breadcrumb">
- <a class="breadcrumb-item" href="#">Home</a>
- <a class="breadcrumb-item" href="#">Library</a>
- <a class="breadcrumb-item" href="#">Data</a>
- <span class="breadcrumb-item active">Bootstrap</span>
- <div class="pull-right align-middle">
- <i class="fa fa-th-large"></i>
- </div>
- </nav>
-
- <div class="row tbl-view d-flex align-content-stretch flex-wrap">
- <div class="col-xs-12">
- <table class="table table-hover table-sm table-responsive">
- <thead>
- <tr>
- <th colspan="2">Name</th>
- <th>Größe</th>
- <th>Art</th>
- <th>geändert</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td><i class="fa fa-folder-o"></i></td>
- <td>Ordner 1</td>
- <td>4 Objekte</td>
- <td>Ordner</td>
- <td>14.02.2017</td>
- </tr>
- <tr>
- <td><i class="fa fa-file-o"></i></td>
- <td>Datei 1</td>
- <td>6 kB</td>
- <td>Text</td>
- <td>12.02.2017</td>
- </tr>
- <tr>
- <td><i class="fa fa-file-o"></i></td>
- <td>Datei 2</td>
- <td>20 MB</td>
- <td>Text</td>
- <td>16.10.2016</td>
- </tr>
-
- <tr>
- <td><i class="fa fa-file-o"></i></td>
- <td>Datei 2</td>
- <td>20 MB</td>
- <td>Text</td>
- <td>16.10.2016</td>
- </tr>
- <tr>
- <td><i class="fa fa-file-o"></i></td>
- <td>Datei 2</td>
- <td>20 MB</td>
- <td>Text</td>
- <td>16.10.2016</td>
- </tr>
- <tr>
- <td><i class="fa fa-file-o"></i></td>
- <td>Datei 2</td>
- <td>20 MB</td>
- <td>Text</td>
- <td>16.10.2016</td>
- </tr>
- <tr>
- <td><i class="fa fa-file-o"></i></td>
- <td>Datei 2</td>
- <td>20 MB</td>
- <td>Text</td>
- <td>16.10.2016</td>
- </tr>
- <tr>
- <td><i class="fa fa-file-o"></i></td>
- <td>Datei 2</td>
- <td>20 MB</td>
- <td>Text</td>
- <td>16.10.2016</td>
- </tr>
- <tr>
- <td><i class="fa fa-file-o"></i></td>
- <td>Datei 2</td>
- <td>20 MB</td>
- <td>Text</td>
- <td>16.10.2016</td>
- </tr>
- <tr>
- <td><i class="fa fa-file-o"></i></td>
- <td>Datei 2</td>
- <td>20 MB</td>
- <td>Text</td>
- <td>16.10.2016</td>
- </tr>
- <tr>
- <td><i class="fa fa-file-o"></i></td>
- <td>Datei 2</td>
- <td>20 MB</td>
- <td>Text</td>
- <td>16.10.2016</td>
- </tr>
- <tr>
- <td><i class="fa fa-file-o"></i></td>
- <td>Datei 2</td>
- <td>20 MB</td>
- <td>Text</td>
- <td>16.10.2016</td>
- </tr>
- <tr>
- <td><i class="fa fa-file-o"></i></td>
- <td>Datei 2</td>
- <td>20 MB</td>
- <td>Text</td>
- <td>16.10.2016</td>
- </tr>
- <tr>
- <td><i class="fa fa-file-o"></i></td>
- <td>Datei 2</td>
- <td>20 MB</td>
- <td>Text</td>
- <td>16.10.2016</td>
- </tr>
- </tbody>
- </table>
- </div>
- </div>
- </div>
- </div>
- </div>
-
- </div> <!-- alles -->
-
- <!-- Skripte -->
- <script src="/jslib/jquery/jquery.min.js"></script>
- <script src="/jslib/bootstrap/js/bootstrap.min.js"></script>
- <script src="/jslib/mustache/mustache.min.js"></script>
- <script src="ui.js"></script>
- <script type="text/javascript" charset="utf-8">
- //var ui;
- $(document).ready(function() {
- fm_init();
- });
- </script>
-
- <!-- Ende Body -->
- </body>
-</html>
diff --git a/web/proto/verworfen/liste2.html b/web/proto/verworfen/liste2.html
deleted file mode 100644
index 795302e..0000000
--- a/web/proto/verworfen/liste2.html
+++ /dev/null
@@ -1,113 +0,0 @@
-<!DOCTYPE html>
-<html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Prototyp Flex-Versuch</title>
- <link rel="stylesheet" type="text/css" href="/jslib/bootstrap/css/bootstrap.min.css">
- <link rel="stylesheet" type="text/css" href="/jslib/font-awesome/css/font-awesome.min.css">
- <link rel="stylesheet" type="text/css" href="flex-versuch.css">
- <script id="tpl-list" type="x-tmpl-mustache">
- {{#List}}
- {{#List}}
- <option value="{{ String }}">{{ String }}</option>'
- {{/List}}
- {{/List}}
- </script>
- </head>
- <body>
- <!-- Anfang Body -->
-
- <!-- Anfang Inhalt -->
-
- <div id="inhalt" class="d-flex flex-column h-100">
- <!-- Menue -->
- <div id="menue">
- <ul class="nav">
- <li class="nav-item dropdown">
- <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Verwaltung</a>
- <div class="dropdown-menu">
- <a class="dropdown-item" href="/">WebBox</a>
- <div class="dropdown-divider"></div>
- <a class="dropdown-item" href="/wbx/mng">Apps</a>
- <a class="dropdown-item" href="/um/ui">Benutzer</a>
- </div>
- </li>
- <li class="nav-item dropdown">
- <a id="userMenu" class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
- <div class="dropdown-menu">
- <a id="logout" class="dropdown-item" href="#">Abmelden</a>
- </div>
- </li>
- </ul>
- </div>
-
- <div class="d-flex bg-faded h-100">
- <div class="d-flex flex-row h-100"><!-- zwei Spalten: Seitenleiste und Inhalt -->
- <div class="bg-success hidden-xs-down">
- <!-- linke Seitenleiste mit Links -->
- <nav class="nav flex-column">
- <a class="nav-link active" href="#">Active</a>
- <a class="nav-link" href="#">Link</a>
- <a class="nav-link" href="#">Link</a>
- <a class="nav-link disabled" href="#">Disabled</a>
- </nav>
- </div>
- <div class="flex-column bg-info"> <!-- Spalte: Breadcrumb und Dateiliste -->
- <div>
- <nav class="breadcrumb">
- <a class="breadcrumb-item" href="#">Home</a>
- <a class="breadcrumb-item" href="#">Library</a>
- <a class="breadcrumb-item" href="#">Data</a>
- <span class="breadcrumb-item active">Bootstrap</span>
- <div class="pull-right align-middle">
- <i class="fa fa-th-large"></i>
- </div>
- </nav>
- </div>
-
- <div class="file-view">
- <p>Dateiliste</p>
-
- <div id="lipsum">
- <p>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi bibendum nisi at nunc egestas maximus. Nullam eu vulputate velit, quis congue tortor. Integer nisl ante, eleifend a aliquam vel, varius ac augue. Sed volutpat condimentum placerat. Duis et nunc tristique, semper lectus ut, finibus ligula. Morbi iaculis velit non pharetra congue. Fusce quis elit vel magna mattis dignissim. Nullam rutrum ligula nisi, ac convallis erat rutrum ac. Sed egestas id purus sit amet vestibulum. Pellentesque vitae suscipit felis.
- </p>
- <p>
- Aenean ac nulla tempor augue blandit rhoncus. In tincidunt tempus imperdiet. Fusce non dui ut neque iaculis laoreet. In interdum consectetur sapien vel lacinia. Vivamus euismod a leo nec consectetur. Integer consequat massa eget ipsum maximus, vitae dapibus velit cursus. Ut at est ut justo pellentesque vulputate. Integer molestie, odio in cursus placerat, ex eros auctor sem, nec viverra arcu ipsum sed magna. Mauris dignissim rutrum lacus. Duis convallis magna sed neque malesuada eleifend.
- </p>
- <p>
- Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce mollis aliquam tellus id finibus. In ultrices, dui id laoreet accumsan, enim justo dictum velit, et accumsan tellus erat ut odio. Proin sit amet feugiat turpis, quis lobortis nisi. Nulla facilisi. Phasellus malesuada nisi quis sapien tristique accumsan. Curabitur mattis ullamcorper quam, nec iaculis libero volutpat at.
- </p>
- <p>
- Pellentesque placerat lectus id velit vestibulum tincidunt sit amet iaculis neque. Donec dapibus in velit eu rhoncus. Phasellus accumsan id sapien vel vehicula. Curabitur felis tellus, hendrerit at commodo non, vestibulum vitae mauris. Sed molestie placerat est, et tincidunt nulla imperdiet eu. Curabitur molestie, sem a ultricies convallis, odio leo tempus felis, ut auctor lorem leo eu dui. Donec dignissim blandit scelerisque. Suspendisse potenti. Donec bibendum lacus eget dui semper, sed suscipit neque fringilla.
- </p>
- <p>
- Curabitur gravida tellus eget odio tristique rutrum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam eu pretium enim. Nullam commodo diam vestibulum est porta, a rutrum lectus egestas. Morbi a convallis augue. Vivamus tempus euismod massa, ut tempor nibh congue eu. Aliquam quis risus eget eros dictum lobortis sit amet nec lectus. Nullam ac turpis feugiat, rutrum tortor eget, dictum ligula.
- </p>
- </div>
-
- </div>
-
- </div> <!-- Spalte: Breadcrumb und Dateiliste -->
- </div> <!-- zwei Spalten: Seitenleiste und Inhalt -->
- </div>
- </div>
-
- <!-- Ende Inhalt -->
-
- <!-- Skripte -->
- <script src="/jslib/jquery/jquery.min.js"></script>
- <script src="/jslib/bootstrap/js/bootstrap.min.js"></script>
- <script src="/jslib/mustache/mustache.min.js"></script>
- <script src="ui.js"></script>
- <script type="text/javascript" charset="utf-8">
- //var ui;
- $(document).ready(function() {
- // hier kann man etwas initialisieren
- });
- </script>
-
- <!-- Ende Body -->
- </body>
-</html>
diff --git a/web/proto/verworfen/liste3.css b/web/proto/verworfen/liste3.css
deleted file mode 100644
index 79a720f..0000000
--- a/web/proto/verworfen/liste3.css
+++ /dev/null
@@ -1,40 +0,0 @@
-
-html, body {
- margin: 0;
- padding: 0;
- height: 100%;
-}
-
-#kopf {
- margin: 0;
- padding: 0;
- background-color: aliceblue;
-}
-#links {
- margin: 0;
- padding: 0;
- background-color: beige;
-}
-#inhalt {
- margin: 0;
- padding: 0;
- height: 100%;
- display: flex;
- flex-flow: column;
- background-color: lightgrey;
-}
-
-#spalten {
- margin: 0;
- padding: 0;
- height: 100%;
- display: flex;
- flex-flow: row;
-}
-
-#rechts {
- margin: 0;
- padding: 0;
- overflow: auto;
-}
-
diff --git a/web/proto/verworfen/liste3.html b/web/proto/verworfen/liste3.html
deleted file mode 100644
index 6b0d5f9..0000000
--- a/web/proto/verworfen/liste3.html
+++ /dev/null
@@ -1,72 +0,0 @@
-<!DOCTYPE html>
-<html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Prototyp Flex-Versuch</title>
- <link rel="stylesheet" type="text/css" href="/jslib/bootstrap/css/bootstrap.min.css">
- <link rel="stylesheet" type="text/css" href="/jslib/font-awesome/css/font-awesome.min.css">
- <link rel="stylesheet" type="text/css" href="liste3.css">
- <script id="tpl-list" type="x-tmpl-mustache">
- {{#List}}
- {{#List}}
- <option value="{{ String }}">{{ String }}</option>'
- {{/List}}
- {{/List}}
- </script>
- </head>
- <body>
- <!-- Anfang Body -->
-
- <!-- Anfang Inhalt -->
-
- <div id="inhalt">
- <div id="kopf">
- <p>Kopf</p>
- </div>
- <div id="spalten">
- <div id="links"> <!-- linke Spalte -->
- <p>Links</p>
- </div> <!-- linke Spalte -->
- <div id="rechts"> <!-- rechte Spalte -->
- <p>Dateiliste</p>
-
- <div id="lipsum">
- <p>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi bibendum nisi at nunc egestas maximus. Nullam eu vulputate velit, quis congue tortor. Integer nisl ante, eleifend a aliquam vel, varius ac augue. Sed volutpat condimentum placerat. Duis et nunc tristique, semper lectus ut, finibus ligula. Morbi iaculis velit non pharetra congue. Fusce quis elit vel magna mattis dignissim. Nullam rutrum ligula nisi, ac convallis erat rutrum ac. Sed egestas id purus sit amet vestibulum. Pellentesque vitae suscipit felis.
- </p>
- <p>
- Aenean ac nulla tempor augue blandit rhoncus. In tincidunt tempus imperdiet. Fusce non dui ut neque iaculis laoreet. In interdum consectetur sapien vel lacinia. Vivamus euismod a leo nec consectetur. Integer consequat massa eget ipsum maximus, vitae dapibus velit cursus. Ut at est ut justo pellentesque vulputate. Integer molestie, odio in cursus placerat, ex eros auctor sem, nec viverra arcu ipsum sed magna. Mauris dignissim rutrum lacus. Duis convallis magna sed neque malesuada eleifend.
- </p>
- <p>
- Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce mollis aliquam tellus id finibus. In ultrices, dui id laoreet accumsan, enim justo dictum velit, et accumsan tellus erat ut odio. Proin sit amet feugiat turpis, quis lobortis nisi. Nulla facilisi. Phasellus malesuada nisi quis sapien tristique accumsan. Curabitur mattis ullamcorper quam, nec iaculis libero volutpat at.
- </p>
- <p>
- Pellentesque placerat lectus id velit vestibulum tincidunt sit amet iaculis neque. Donec dapibus in velit eu rhoncus. Phasellus accumsan id sapien vel vehicula. Curabitur felis tellus, hendrerit at commodo non, vestibulum vitae mauris. Sed molestie placerat est, et tincidunt nulla imperdiet eu. Curabitur molestie, sem a ultricies convallis, odio leo tempus felis, ut auctor lorem leo eu dui. Donec dignissim blandit scelerisque. Suspendisse potenti. Donec bibendum lacus eget dui semper, sed suscipit neque fringilla.
- </p>
- <p>
- Curabitur gravida tellus eget odio tristique rutrum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam eu pretium enim. Nullam commodo diam vestibulum est porta, a rutrum lectus egestas. Morbi a convallis augue. Vivamus tempus euismod massa, ut tempor nibh congue eu. Aliquam quis risus eget eros dictum lobortis sit amet nec lectus. Nullam ac turpis feugiat, rutrum tortor eget, dictum ligula.
- </p>
- </div>
-
- </div> <!-- rechte Spalte -->
- </div>
- </div>
-
- <!-- Ende Inhalt -->
-
- <!-- Skripte -->
- <script src="/jslib/jquery/jquery.min.js"></script>
- <script src="/jslib/bootstrap/js/bootstrap.min.js"></script>
- <script src="/jslib/mustache/mustache.min.js"></script>
- <script src="ui.js"></script>
- <script type="text/javascript" charset="utf-8">
- //var ui;
- $(document).ready(function() {
- // hier kann man etwas initialisieren
- });
- </script>
-
- <!-- Ende Body -->
- </body>
-</html>
diff --git a/web/proto/verworfen/liste5.html b/web/proto/verworfen/liste5.html
deleted file mode 100644
index f5c5e2f..0000000
--- a/web/proto/verworfen/liste5.html
+++ /dev/null
@@ -1,302 +0,0 @@
-<!DOCTYPE html>
-<html>
- <head>
- <title>Flexbox Demo</title>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <link rel="stylesheet" type="text/css" href="/jslib/bootstrap/css/bootstrap.min.css">
- <style>
- html {
- margin: 0;
- padding: 0;
- height: 100%; /* Anmerkung 2 */
- }
- body {
- margin: 0;
- padding: 0;
- height: 100%; /* Anmerkung 2 */
- min-height: 0; /* Anmerkung 1 */
- display: flex;
- flex-flow: column;
- }
- .inhalt {
- display: flex;
- flex-flow: row;
- height: 100%; /* Anmerkung 2 */
- min-height: 0; /* Anmerkung 1 */
- }
- .nord {
- background-color: lightgray;
- }
- .sued {
- background-color: lightgray;
- }
- .west {
- flex-grow: 0;
- flex-shrink: 0;
- flex-basis: 10em;
- background-color: antiquewhite;
- }
- .ost {
- flex-grow: 0;
- flex-shrink: 0;
- flex-basis: 10em;
- background-color: antiquewhite;
- }
- .zentrum {
- width: 100%;
- height: 100%;
- overflow: auto;
- -webkit-overflow-scrolling: touch;
- }
- .lipsum {
- color: lightgrey;
- }
-
- /*
- Anmerkungen:
- 1.) min.height: 0 fuer body und inhalt ist gegen einen Bug, vgl.
- http://stackoverflow.com/questions/33859811/understanding-flexbox-and-overflowauto
- 2.) height 100% fuer html, body und inhalt sorgt dafuer, dass sich alles
- immer ueber das gesamte Browserfenster ausdehnt.
- */
- </style>
- </head>
- <body>
- <!-- Kopfzeile -->
- <div class="nord">
-
- <div id="menue"> <!-- Menue -->
- <ul class="nav">
- <li class="nav-item dropdown">
- <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Verwaltung</a>
- <div class="dropdown-menu">
- <a class="dropdown-item" href="/">WebBox</a>
- <div class="dropdown-divider"></div>
- <a class="dropdown-item" href="/wbx/mng">Apps</a>
- <a class="dropdown-item" href="/um/ui">Benutzer</a>
- </div>
- </li>
- <li class="nav-item dropdown">
- <a id="userMenu" class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
- <div class="dropdown-menu">
- <a id="logout" class="dropdown-item" href="#">Abmelden</a>
- </div>
- </li>
- </ul>
- </div> <!-- Menue -->
-
- </div>
- <div class="inhalt">
- <!-- westliche Seitenleiste -->
- <div class="west">
- westliche Seitenleiste
- </div>
- <!-- zentraler Inhaltsbereich -->
- <div class="zentrum">
-
- <nav class="breadcrumb">
- <a class="breadcrumb-item" href="#">Home</a>
- <a class="breadcrumb-item" href="#">Library</a>
- <a class="breadcrumb-item" href="#">Data</a>
- <span class="breadcrumb-item active">Bootstrap</span>
- <div class="pull-right align-middle">
- <i class="fa fa-th-large"></i>
- </div>
- </nav>
-
-
- <p>
- Dies ist ein Beispiel für eine Webseite, die ein
- <code>flexbox</code>-Layout für die Anordnung ihrer Inhalte
- nutzt.
- </p>
- <p>
- Der Inhaltsbereich in der Mitte passt sich zur Laufzeit dynamisch
- an die Größe des Browserfensters an. Er wird von einer
- Kopfzeile, einer Fußzeile und zwei Seitenleisten umschlossen
- die eine feste Größe haben.
- </p>
- <p>
- Nachfolgend einiger Text, der das Verhalten des Layouts demonstrieren
- soll, wenn die Textmenge den vorhandenen Raum übersteigt.
- </p>
- <div class="lipsum">
- <p>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac maximus velit. Curabitur tellus lorem, porta bibendum sollicitudin ac, cursus ut nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris non ornare mauris. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent id est nec tellus consequat viverra ut a nunc. Fusce sagittis pulvinar diam, vel ultricies sapien pretium nec. Aliquam ac arcu vehicula ex fringilla cursus.
- </p>
- <p>
- Donec sit amet efficitur nisl. Aliquam rutrum mattis ante quis ultrices. In non blandit ex. Aenean fermentum feugiat orci at malesuada. Sed vitae facilisis erat, at luctus erat. Nulla sodales leo eget sem pretium, elementum porttitor nulla feugiat. Mauris eget lectus a felis finibus condimentum sed et diam. Donec nec nunc sit amet erat feugiat iaculis. Vestibulum sem ante, ornare a hendrerit vel, facilisis et libero. Donec a libero congue, blandit neque mattis, fringilla augue.
- </p>
- <p>
- Mauris et volutpat orci, sodales lacinia neque. Sed quis ex velit. Donec quis urna vel leo tincidunt ultricies. Aliquam neque justo, vestibulum at tristique eget, rhoncus bibendum diam. Phasellus iaculis diam massa, ac euismod massa vulputate et. Quisque sed diam maximus, commodo risus eget, rutrum neque. Vivamus tellus enim, vehicula at erat rhoncus, rutrum sagittis tellus. Nulla ornare, libero in ornare placerat, enim quam finibus ipsum, at dictum augue diam sit amet lacus. Aliquam at lectus ac urna imperdiet dictum.
- </p>
- <p>
- Nullam finibus erat ac dolor vehicula aliquet. Nam pretium ut dolor ut ultricies. Nam posuere ipsum neque, at placerat sem egestas vitae. Curabitur velit dui, ultrices a justo nec, sollicitudin ultricies mi. Ut mauris nisl, pharetra ac lectus sed, finibus pharetra ligula. Praesent eleifend, erat nec cursus feugiat, sapien sem blandit est, eget bibendum metus enim condimentum metus. Etiam ultricies ante et ante molestie tempor quis et orci. Suspendisse auctor turpis nec turpis pulvinar, commodo faucibus neque dapibus. Quisque metus velit, bibendum at varius ut, efficitur mollis massa. Sed molestie mi sed ultricies mollis. Nullam sagittis imperdiet imperdiet. Ut auctor interdum molestie. Aliquam luctus libero magna, ac vulputate massa sollicitudin sed.
- </p>
- <p>
- Praesent at finibus dolor. Praesent feugiat est in enim imperdiet, ut egestas quam fringilla. Vivamus urna ante, interdum a posuere ut, suscipit vitae nisi. Aliquam finibus dolor eget dictum pharetra. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut non commodo nisi. Vivamus pharetra arcu at molestie scelerisque.
- </p>
- <p>
- Donec tincidunt in purus eu feugiat. Duis vitae tincidunt eros, vitae lobortis sem. Integer tempor porta quam, non varius urna congue nec. Nullam accumsan, mi et vehicula gravida, leo ligula tempor leo, vel luctus ligula dui sit amet libero. Cras ac lacinia est, eu luctus tellus. Nullam in vestibulum massa. Suspendisse potenti. Morbi congue nisi et finibus accumsan.
- </p>
- <p>
- Etiam diam augue, porta vel lobortis a, luctus non ligula. Proin elementum vel mi at ultrices. Quisque iaculis tincidunt elit in egestas. Aliquam erat volutpat. Phasellus nec leo eleifend est elementum aliquam at nec sapien. In hac habitasse platea dictumst. Aliquam blandit nunc nec est volutpat, quis lobortis augue pulvinar.
- </p>
- <p>
- Ut ac congue leo. Sed massa felis, ultricies vitae blandit non, euismod eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vitae lobortis magna, in varius nisl. Donec at commodo lectus, sagittis tincidunt mi. Nunc cursus orci in tellus vulputate auctor. Sed iaculis nisi id accumsan venenatis. Suspendisse tincidunt risus ut suscipit molestie. Duis ullamcorper sit amet quam vel sagittis. Ut lacinia mi diam, id semper ipsum auctor quis. Maecenas non metus volutpat, cursus tellus a, blandit tortor. Proin ultricies mauris ut sem dictum, sed fermentum magna rhoncus. Nam id elit nec nisi mollis laoreet eget rhoncus mauris. Suspendisse in lorem lorem. Nam scelerisque condimentum dui dignissim fermentum. Pellentesque congue molestie dignissim.
- </p>
- <p>
- Proin maximus, tortor at tristique sagittis, leo tellus gravida neque, quis efficitur eros leo sed nisl. Vivamus fermentum lobortis magna in consectetur. Vestibulum ipsum purus, rutrum id faucibus sit amet, sagittis eget mauris. Integer ultricies tristique enim. Phasellus ultricies lacinia ipsum, eget hendrerit quam ultrices et. Donec viverra eget massa eu tincidunt. Pellentesque vel ligula semper eros cursus porttitor. Proin pretium magna purus. Duis laoreet est vel gravida finibus. Sed et varius neque, nec tincidunt est. In hac habitasse platea dictumst. Donec placerat ultrices diam at maximus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
- </p>
- <p>
- Nulla vel gravida diam, sed aliquet mauris. Donec pulvinar arcu id consequat tincidunt. Nullam bibendum tellus non finibus tincidunt. Nunc finibus, lorem non ornare efficitur, turpis lacus sodales arcu, ut interdum massa quam in dui. Vivamus turpis nibh, dignissim in lectus vitae, posuere egestas lectus. Ut tincidunt tellus ut risus iaculis bibendum. Cras consequat facilisis risus, vel rhoncus nunc ornare id. Morbi elementum luctus nisl eu interdum. Integer dictum lectus aliquet lorem varius, quis egestas tellus maximus. Nam ex neque, tristique quis ipsum non, porttitor tincidunt augue. Vivamus eu consectetur velit.
- </p>
- <p>
- Donec et imperdiet massa. Morbi cursus, diam ac consequat mattis, ante justo mattis ex, ultrices vulputate erat neque id turpis. Donec vitae purus vitae neque mollis pulvinar. Aenean fermentum dui et enim consequat viverra. Curabitur vel urna ut purus auctor ultricies. Maecenas a tortor nunc. Praesent ornare velit in dui aliquam, id ullamcorper quam aliquet. Aenean id tempor neque. Nulla id semper ipsum. Aliquam sit amet lacus ut orci facilisis viverra. Morbi ut euismod nunc, at fringilla dui. Curabitur mi eros, porta eu tortor eu, feugiat rhoncus purus. Donec ligula leo, vestibulum nec neque vitae, aliquet semper felis.
- </p>
- <p>
- Vivamus rutrum vulputate nunc, non dignissim enim placerat nec. Mauris finibus nisi ac dapibus vehicula. Ut vitae pharetra odio, eu tristique nulla. Vestibulum fringilla orci lacus, non imperdiet mauris venenatis a. In finibus lacus quis malesuada tempus. Sed ac neque ultricies ligula volutpat tempor. Vestibulum sit amet elementum ligula, ut laoreet nibh. Aenean vitae congue velit. Vestibulum vel sapien sem. Praesent consequat libero massa, eu cursus nulla rhoncus a. Suspendisse non sapien nec erat varius varius sit amet ac sem. Aenean ullamcorper cursus nulla, quis euismod dui cursus sed. Vivamus ornare lorem non tortor feugiat volutpat.
- </p>
- <p>
- Praesent viverra in libero vel laoreet. Integer euismod vestibulum mi id efficitur. Pellentesque orci dolor, aliquet vitae accumsan ut, pellentesque eu dolor. Nulla dolor neque, consectetur sed ornare eu, laoreet vehicula purus. Pellentesque tristique, orci vitae feugiat semper, ligula urna rhoncus ipsum, et ullamcorper arcu lorem nec leo. Phasellus tristique dui at purus lacinia rutrum. Cras semper, ipsum non blandit egestas, orci eros malesuada nisl, quis facilisis diam lectus feugiat dolor. Suspendisse potenti.
- </p>
- <p>
- In et malesuada enim. Vestibulum tristique eleifend arcu quis laoreet. Ut nec leo libero. Nunc auctor orci a interdum suscipit. Morbi in metus aliquet magna venenatis ullamcorper ac vel elit. Aliquam malesuada magna ante, quis semper ipsum porta a. Aliquam dolor velit, hendrerit at nibh nec, commodo dictum metus. Quisque sed purus sit amet arcu semper rutrum a ac justo. Aliquam ultrices facilisis est non faucibus.
- </p>
- <p>
- Aliquam tristique lacinia nulla, eu varius est pulvinar ac. Ut maximus hendrerit justo non dignissim. Sed non metus accumsan, dictum mi id, rutrum ligula. In gravida odio velit, ac sollicitudin nunc tempor sit amet. Cras id bibendum dui. Etiam at massa ac diam facilisis congue pulvinar nec mauris. Donec placerat ut nulla et dignissim. Suspendisse potenti. Quisque id quam feugiat, placerat sapien at, porttitor ligula. Vestibulum luctus tellus ac nisl accumsan, vitae scelerisque neque accumsan. Duis vitae ullamcorper sapien, nec ullamcorper sem. Sed ut lectus a metus cursus sollicitudin nec eu nibh. Nunc sit amet aliquet eros, vel luctus ligula. Nam enim nunc, semper eu bibendum quis, laoreet id mauris. Mauris placerat, sapien eget sollicitudin vehicula, leo ipsum laoreet augue, eget convallis dui nisl vel velit.
- </p>
- <p>
- Morbi pharetra porta augue ut commodo. Proin porta dignissim leo ac aliquet. Morbi id tellus at odio pretium bibendum molestie interdum ante. Suspendisse potenti. Nunc pretium lorem vel massa tincidunt elementum. Nulla vulputate ex sit amet felis sodales elementum. Donec ex lacus, posuere consequat sodales in, elementum elementum nisl. Curabitur convallis sapien id lorem sagittis, vel mollis nibh iaculis. Morbi congue tincidunt purus, vel ultrices nibh accumsan vel. Aliquam tristique lacinia urna, eleifend euismod leo varius nec. Sed faucibus id mi a viverra. Nunc nec augue ut nibh luctus varius at at sem. Nam et accumsan sapien. Suspendisse potenti. Donec rutrum sapien id elit accumsan, eget ornare arcu condimentum.
- </p>
- <p>
- Phasellus volutpat purus a pharetra tincidunt. In hac habitasse platea dictumst. Aenean eleifend nec nibh ac rutrum. Maecenas sed pharetra augue, quis posuere ipsum. Praesent scelerisque venenatis arcu nec tempus. Fusce quis pretium lorem. Aenean suscipit auctor tortor, porta porttitor diam scelerisque quis.
- </p>
- <p>
- Aliquam non tellus a est tristique lacinia non quis arcu. Ut faucibus varius erat et tincidunt. Morbi semper mattis gravida. Ut metus orci, blandit id sapien nec, auctor fringilla felis. Donec nisl mauris, pulvinar et ipsum at, finibus consequat magna. Ut at ultrices odio. Quisque at enim at ipsum venenatis rhoncus. Morbi sit amet nunc fermentum, tempus elit in, ornare velit. Donec vehicula mollis dui vitae euismod.
- </p>
- <p>
- Curabitur vel metus malesuada erat dictum vulputate et id est. Vivamus eu tincidunt risus. Suspendisse gravida lectus ut ante varius, at viverra tellus ultricies. Morbi varius purus quis tortor sodales, a pulvinar neque efficitur. Nulla varius, diam et pretium tincidunt, sapien est tempor magna, fermentum dictum dolor nulla nec ligula. Fusce semper nisl sit amet posuere maximus. Donec lacinia lectus sed nisi finibus vestibulum. Nullam venenatis venenatis quam vehicula euismod. Nunc mattis porttitor neque feugiat pellentesque. Interdum et malesuada fames ac ante ipsum primis in faucibus.
- </p>
- <p>
- Suspendisse mollis, dolor quis consectetur eleifend, mi ex tempor arcu, id mollis sem orci vel sapien. Mauris venenatis, orci vel pulvinar ullamcorper, dui diam tincidunt ipsum, eget fringilla risus est placerat urna. Proin iaculis eu massa eget dictum. Aenean et enim quis purus maximus lacinia nec non mauris. Vivamus sollicitudin facilisis lectus, quis lobortis massa suscipit at. Phasellus et enim sed mauris efficitur aliquet. Pellentesque sed nisl eu augue tincidunt lacinia in quis magna. In congue euismod purus, et congue est placerat vitae. Maecenas id neque turpis. Sed tincidunt condimentum orci, et facilisis odio molestie a. Phasellus ut molestie justo. In laoreet tempor maximus. Curabitur eget consectetur est, et condimentum urna.
- </p>
- <p>
- Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque elit nisl, blandit nec eleifend a, eleifend id nunc. Etiam nunc enim, fermentum malesuada sollicitudin nec, pellentesque nec elit. Donec rhoncus semper cursus. Mauris dapibus, ante a tincidunt fringilla, augue nibh interdum sapien, ac imperdiet felis augue ut orci. Integer viverra venenatis elit vitae vulputate. Suspendisse ornare ante eu odio mattis, nec aliquam diam viverra. Aenean volutpat orci enim, vel porta erat condimentum vitae. Nam rhoncus mi eu libero hendrerit, sit amet viverra enim cursus.
- </p>
- <p>
- Duis tincidunt ultricies neque, vel dapibus lectus. Suspendisse et dui et felis tincidunt elementum. Aenean ac lacus tempor, placerat ante vitae, auctor nulla. Cras dignissim tortor quam, nec rhoncus elit consectetur semper. Sed fringilla neque a mi faucibus, ac blandit mauris scelerisque. Donec eu lacinia mauris, sed bibendum sem. Vestibulum consectetur massa non volutpat auctor.
- </p>
- <p>
- Quisque eu lobortis ipsum, vel tempor magna. Sed in vehicula purus. Duis non commodo ligula, vitae posuere urna. Cras at lectus lacinia, vestibulum purus in, accumsan eros. Nam mauris leo, interdum dictum purus non, varius varius lorem. Proin at blandit nibh. Donec id ullamcorper nisl. Aenean id convallis odio, id venenatis leo. Vestibulum venenatis laoreet metus. Donec id sapien malesuada, tempus dolor vel, porttitor nisi. Aliquam eget volutpat magna.
- </p>
- <p>
- Phasellus vel auctor augue. In aliquam purus enim, porta sagittis tellus posuere nec. Fusce at tincidunt nisl. Aenean quis ultrices quam, nec posuere nunc. Curabitur quis eros eu augue auctor semper vel et sem. Etiam fringilla, arcu ut cursus molestie, massa nunc fringilla erat, ac efficitur justo ipsum ut purus. Integer vestibulum ullamcorper dui, vel facilisis purus condimentum gravida. Sed at dolor a tortor molestie feugiat. Proin sagittis convallis mi at pretium. Sed egestas sit amet mauris ac placerat. Ut molestie diam et turpis sagittis suscipit. Sed ullamcorper velit id velit pellentesque, a sagittis nibh tempor. Sed non dolor a lorem efficitur aliquam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec pretium feugiat condimentum.
- </p>
- <p>
- Etiam id placerat velit. Phasellus at pulvinar lectus. Aliquam suscipit vitae lectus vel dapibus. Morbi vel orci at neque blandit egestas. Maecenas at nunc porttitor, pellentesque est quis, egestas nibh. Proin auctor justo non felis laoreet, eu faucibus ligula volutpat. Donec dui dolor, iaculis non hendrerit volutpat, porta ac quam. Integer sed dictum dui, quis tempor felis.
- </p>
- <p>
- Phasellus quis risus non metus sagittis lobortis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut sed elementum odio. Sed ac odio non risus imperdiet dignissim. In ac velit odio. Maecenas sed enim et risus molestie venenatis interdum nec dolor. Cras viverra purus a lorem lobortis ornare. Ut quis nisl porttitor, fringilla odio vitae, accumsan diam. Morbi volutpat egestas diam, ut venenatis turpis. Donec quis dapibus sem, ut viverra lacus. Aliquam efficitur fringilla mi vel rhoncus. Vestibulum neque diam, porta ut scelerisque at, dictum non nunc. Nam purus nisl, facilisis a vulputate nec, hendrerit maximus lorem. Integer leo magna, iaculis a mattis nec, eleifend sed tellus.
- </p>
- <p>
- Curabitur dictum sed risus laoreet commodo. Integer quis tellus lectus. Vivamus nec lectus pulvinar felis tempus auctor ut in ante. Nam ultricies mauris et risus imperdiet, vitae tincidunt augue ullamcorper. Proin feugiat nisi ac diam blandit, ac gravida sapien malesuada. Etiam auctor placerat mattis. In ac leo quis velit efficitur euismod eget eu tellus. Suspendisse ac nibh lobortis, lacinia elit a, sollicitudin nibh. Ut et ligula mattis, commodo sapien quis, tempus lorem. Vivamus pellentesque mauris sit amet sem mattis vestibulum. Pellentesque quis massa maximus, lacinia justo a, auctor massa.
- </p>
- <p>
- Donec ut feugiat dolor. Phasellus eleifend id dui luctus luctus. Fusce ut arcu lectus. Mauris a velit vel purus ultricies dignissim. Duis sagittis sapien sed nisi mollis condimentum vel bibendum ante. Etiam iaculis varius dui eget dictum. In accumsan metus sed feugiat tristique.
- </p>
- <p>
- Suspendisse sit amet ipsum vitae lorem rhoncus interdum. Nam id varius ante. Maecenas mi odio, posuere eu leo eu, ullamcorper commodo urna. Aenean turpis lacus, scelerisque sit amet blandit non, pretium eget nisi. Morbi varius erat sit amet volutpat placerat. Donec ac aliquam ligula. Morbi consectetur interdum leo et suscipit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
- </p>
- <p>
- Nam non quam ullamcorper, tincidunt dui quis, suscipit justo. Aliquam vitae rutrum augue, at semper sem. Suspendisse et molestie felis, eget lacinia est. Etiam id orci et nibh dictum hendrerit non in nunc. Mauris varius augue non sagittis pellentesque. Pellentesque imperdiet dolor enim, vel venenatis augue ultrices quis. Curabitur in dapibus mauris. Nullam cursus suscipit arcu, eu ultrices lorem tempor vel. Ut ante orci, iaculis eu nisl et, consectetur tempor ligula. Sed ultricies, nisl at tristique efficitur, turpis lectus maximus lacus, in aliquet sem orci ac erat. Sed vestibulum imperdiet turpis, id interdum felis molestie sit amet.
- </p>
- <p>
- Ut egestas nulla sit amet arcu molestie, et condimentum nibh volutpat. Sed eu posuere urna. Ut sollicitudin ultrices urna, sed iaculis arcu. Cras in mollis lacus. Nulla pretium magna at dui pulvinar commodo. Aenean tincidunt interdum neque, ut aliquam orci lobortis non. Etiam in nulla dui. Nulla pulvinar, sem in condimentum sollicitudin, ipsum lorem egestas ex, faucibus ullamcorper turpis lectus nec eros. Aliquam velit neque, tristique eleifend mattis sit amet, imperdiet vel leo. Fusce maximus, metus eu tempus vehicula, nunc nulla ornare metus, ut porta dolor leo eu risus. Quisque egestas, lacus eget rutrum mattis, turpis enim venenatis risus, nec hendrerit justo magna sed mi. Nulla eget vulputate elit, ac sodales orci. Sed ultricies, magna a hendrerit vulputate, erat lacus ornare elit, ac rhoncus ipsum tortor ut dolor.
- </p>
- <p>
- Etiam at posuere dolor. Nunc sed mi quis ex rutrum maximus. Cras aliquam massa orci, ullamcorper facilisis leo ornare vel. Morbi et aliquam quam. Nam ut sapien sit amet purus aliquam tincidunt. Proin aliquam pretium orci, ut interdum lacus. Maecenas sit amet vehicula leo, in bibendum purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
- </p>
- <p>
- Duis sit amet orci lacinia, rutrum velit at, venenatis risus. Fusce mauris erat, facilisis ut metus ornare, consequat egestas dui. Proin iaculis pulvinar urna, id mollis velit accumsan a. Nulla eget nulla mi. Aenean ac mauris id velit varius venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam ornare ex at purus rhoncus posuere. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla quis ante a orci pharetra pretium quis nec justo. Aenean pellentesque lorem ac metus finibus, non consectetur leo ullamcorper. Nam eu ex molestie, sagittis quam et, fermentum elit. Integer non faucibus orci. Integer ultricies consequat enim ac malesuada.
- </p>
- <p>
- Ut scelerisque faucibus dictum. In eget nisl at sem consectetur varius eu fermentum dui. Nullam eleifend dictum risus, in luctus odio sagittis ac. Nullam turpis odio, rhoncus eu augue eget, congue porta felis. Donec a efficitur urna. Vivamus diam felis, eleifend eget pretium nec, blandit ut erat. Etiam non nisi at eros congue lacinia. Proin a venenatis nisi. In erat tellus, accumsan at auctor sed, bibendum ac dolor. Cras sapien justo, pellentesque a dictum sit amet, pulvinar posuere sapien. Maecenas sodales finibus faucibus. Nullam fringilla metus velit, et vehicula turpis cursus ut. Curabitur facilisis varius cursus.
- </p>
- <p>
- Ut sodales augue a dictum fermentum. Proin ornare est urna, vitae convallis ante tristique nec. Aliquam sit amet vehicula est, quis ultricies nibh. Nullam varius vel turpis venenatis ultricies. Nullam sit amet ex sem. Nulla sit amet nisl fermentum, tincidunt magna et, vehicula libero. Nullam interdum nisi eros, vel molestie metus aliquet ut. Nam feugiat condimentum nulla sed convallis. Nunc ac orci ex. Praesent fringilla nunc velit, accumsan tincidunt nibh hendrerit dignissim. In porta purus in libero facilisis, sit amet finibus leo vehicula. Cras consequat odio hendrerit quam convallis auctor. Suspendisse arcu enim, imperdiet accumsan ante a, ornare posuere nisl.
- </p>
- <p>
- Phasellus augue massa, imperdiet at mauris at, mattis volutpat nulla. Pellentesque posuere scelerisque sagittis. Quisque ornare egestas tincidunt. Vestibulum euismod eros et risus porttitor, vitae sagittis erat condimentum. Nam pretium nunc at condimentum semper. Morbi at ligula pretium, tincidunt massa id, imperdiet velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis vel leo malesuada purus egestas venenatis. Vestibulum in nibh tincidunt, egestas massa a, ultricies ipsum. Morbi sollicitudin justo venenatis nulla volutpat condimentum. Donec ut consectetur enim. Nullam fringilla vitae mauris ac condimentum. Ut pharetra tincidunt lorem, ornare bibendum urna dignissim sed. Vivamus faucibus nisi posuere varius mollis.
- </p>
- <p>
- Nullam ex dui, tincidunt ac suscipit eget, pretium ac massa. Integer euismod gravida eros nec porttitor. Aenean vitae nibh purus. Nunc ligula mi, placerat eget leo a, commodo fermentum lacus. In vestibulum augue quis nulla consectetur ornare. Nam quis sapien id nibh placerat imperdiet suscipit sit amet augue. Morbi at dapibus eros, et dapibus massa. Nam in nisl eros. Proin vel tincidunt dolor. Aliquam non mi in neque pharetra finibus. Nulla nisl risus, pulvinar quis sapien sit amet, ultricies dictum ligula. Suspendisse in urna ac metus mattis laoreet. In auctor vehicula imperdiet.
- </p>
- <p>
- Curabitur enim quam, fringilla ut justo tempor, hendrerit tincidunt velit. Quisque non orci erat. Ut tempor malesuada ex, vitae blandit erat scelerisque non. Nulla a velit blandit, gravida lectus quis, egestas ex. Duis in lacus sodales, lobortis tortor et, dictum dui. In eget elementum nisi, quis convallis erat. Pellentesque quis varius velit.
- </p>
- <p>
- Nam vitae feugiat diam. Proin fermentum condimentum consectetur. Cras ut gravida tellus, nec sagittis justo. Mauris eu orci in ante rutrum cursus sit amet eget sem. Integer vitae elit nec nibh convallis vestibulum. Vivamus dui turpis, sodales et orci sit amet, pellentesque lobortis odio. Donec commodo arcu a nunc elementum, id cursus nunc ullamcorper. Sed ac lectus sit amet est aliquet maximus. Donec hendrerit condimentum mauris, vitae facilisis risus fermentum sed. Donec sodales porttitor diam vel laoreet. Donec sed massa tincidunt, maximus odio eu, eleifend turpis. Morbi volutpat posuere erat ut cursus.
- </p>
- <p>
- In hac habitasse platea dictumst. Vivamus a orci rutrum, bibendum velit id, rhoncus nulla. Nulla ac blandit felis. Nulla auctor turpis nisi, id sagittis enim posuere id. Sed fermentum at ante at pretium. Curabitur ante mi, suscipit eu efficitur id, pellentesque vitae lectus. Praesent sed molestie dolor.
- </p>
- <p>
- In condimentum bibendum arcu, sit amet dignissim justo fermentum in. Aenean placerat, sapien vel mollis efficitur, mi justo bibendum leo, et pretium diam augue condimentum odio. Proin sed nibh blandit, consectetur eros quis, commodo est. Nunc porta vestibulum quam eu ullamcorper. Sed tempus justo nunc, mattis accumsan lorem aliquet sed. Vestibulum volutpat nulla vel tristique tempus. Aenean facilisis ex id sapien rhoncus, sit amet iaculis nisl cursus. Nam imperdiet erat ac luctus pellentesque. Donec laoreet cursus lorem. Suspendisse hendrerit varius tincidunt. Mauris at eros auctor risus pharetra fermentum in a nulla. Nunc nec pellentesque quam. Phasellus at vestibulum turpis, id rhoncus tellus.
- </p>
- <p>
- Donec eget fringilla odio, scelerisque molestie ligula. Duis ultricies semper massa vel laoreet. Nam pretium vel lorem sed tempus. Cras justo odio, suscipit vel feugiat a, pharetra ac nulla. Quisque porta nisl vel mattis efficitur. Vivamus nibh arcu, iaculis quis turpis non, malesuada vestibulum lectus. Quisque nec leo ac lorem imperdiet ornare ac vulputate ipsum. Suspendisse luctus, lectus at gravida pretium, odio quam malesuada est, at molestie velit nulla eget nulla. Nullam varius ut neque et sagittis. Mauris tristique consequat congue. Nulla facilisi. Pellentesque tincidunt ex quis diam cursus pulvinar.
- </p>
- <p>
- Aliquam bibendum enim sit amet neque bibendum, eu egestas neque consequat. Aliquam est quam, scelerisque in mauris ac, placerat tristique nunc. Quisque gravida, massa eget fringilla elementum, odio quam elementum eros, eu hendrerit ante dolor a massa. Praesent pellentesque augue lectus, sit amet auctor augue egestas quis. Vivamus mollis, mauris hendrerit tempor congue, nisi tellus tempus velit, eget pellentesque sapien ipsum ut elit. Nam ac velit vitae augue auctor congue. Proin at cursus dui. Integer non urna ut odio porta mattis pellentesque eu tortor. Mauris sodales arcu ut ultrices faucibus. In lacus urna, semper vel ullamcorper semper, consectetur vitae quam.
- </p>
- <p>
- Vestibulum sed nunc luctus, efficitur justo quis, molestie enim. Fusce et orci ut tortor accumsan maximus. Duis ornare nisl nec massa luctus, eget iaculis ante ornare. Morbi egestas massa est, vitae fringilla sem commodo et. Maecenas a leo ultricies, semper velit at, semper dolor. Quisque hendrerit dui et arcu tempor, vitae tempus risus vestibulum. Maecenas elementum lorem sit amet enim commodo venenatis. Phasellus egestas, mi nec aliquam feugiat, odio quam elementum magna, quis posuere elit augue gravida lectus.
- </p>
- <p>
- Quisque quis nibh tempus, tincidunt turpis eu, commodo magna. Ut gravida fermentum ante, at tincidunt mauris fermentum at. In justo mauris, sodales sit amet nibh a, finibus porttitor enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut mattis ultrices nisi vel hendrerit. Phasellus at aliquet purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ornare dapibus massa, in hendrerit nulla ullamcorper eget. Quisque facilisis sem quam, et viverra ipsum tempor lacinia. Nullam mollis placerat nisl. In id mi consectetur, ullamcorper purus at, egestas magna. Ut quis ipsum placerat, egestas orci vitae, porta lectus. Morbi mi leo, lobortis congue condimentum et, euismod at enim. Pellentesque in cursus tellus. Phasellus posuere eros lorem, a ultrices velit faucibus ac.
- </p>
- <p>
- Ut at varius dui. Nulla consequat elit at magna efficitur pellentesque. Quisque sollicitudin faucibus condimentum. Vivamus felis ipsum, dictum eu nibh in, lobortis rhoncus lectus. Aliquam a lectus ligula. Praesent ac cursus dolor, at faucibus massa. Nunc pharetra fermentum tincidunt. Duis venenatis finibus ultrices. Quisque dictum, massa at consectetur ultrices, sem orci ultricies tellus, in volutpat magna lorem et felis. Duis aliquet dui pretium lorem vulputate dapibus. Nulla facilisi. Nulla augue tellus, euismod in sem sed, fermentum lacinia est. Sed a augue gravida, ullamcorper diam id, tempus ipsum. Phasellus rhoncus a leo id molestie. Nulla facilisi.
- </p>
- <p>
- Proin felis ante, pharetra ut convallis vitae, gravida non turpis. Aenean consequat at tortor et tempus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer ipsum tellus, laoreet a massa sit amet, ultrices dapibus sem. Quisque vel ante vel diam mollis laoreet sit amet non urna. Praesent laoreet, dolor a consequat consectetur, massa arcu efficitur nibh, vitae euismod diam nisi vel urna. Suspendisse malesuada orci rhoncus nunc vulputate, et eleifend purus aliquam.
- </p>
- <p>
- Interdum et malesuada fames ac ante ipsum primis in faucibus. In hac habitasse platea dictumst. Curabitur turpis nunc, consequat nec nulla placerat, ullamcorper congue diam. Cras sit amet felis placerat, feugiat nisl id, tincidunt nunc. Mauris at elementum ex. Donec cursus volutpat semper. Aliquam vel imperdiet ipsum. Nullam mollis eu mauris quis sagittis. Cras accumsan, enim eu vulputate suscipit, sapien eros varius mi, vel vestibulum lectus ligula ullamcorper libero.
- </p>
- <p>
- Vivamus id dolor lobortis, efficitur mi eget, dapibus odio. Vivamus bibendum, enim sit amet facilisis interdum, purus quam finibus sem, eu luctus augue est non augue. Sed rhoncus dignissim lectus, at dignissim ante condimentum a. Morbi a facilisis nulla. Quisque lacinia finibus tincidunt. Aliquam eu ullamcorper dolor. Duis euismod iaculis augue, quis viverra leo rhoncus vitae. Donec nec sem ultrices, venenatis lectus non, viverra metus.
- </p>
- <p>
- Suspendisse venenatis ultricies metus, id porta magna fringilla vestibulum. Maecenas molestie nibh at fringilla feugiat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque risus massa, convallis malesuada pharetra vel, maximus ullamcorper lorem. Aenean justo quam, sodales ut eros vel, congue dapibus neque. Praesent malesuada, sapien a tristique blandit, erat purus cursus nunc, eu tristique sem metus eget augue. Mauris imperdiet lectus diam, eu porta ipsum tempus vel. Nullam ornare orci sed scelerisque ultrices. Aenean massa dolor, gravida ut nulla sit amet, semper pharetra enim. Nulla tortor ipsum, ullamcorper commodo rutrum vel, pellentesque nec ipsum. Maecenas mauris elit, mollis in commodo vel, suscipit et mauris.
- </p>
- </div>
- </div>
- <!-- oestliche Seitenleiste -->
- <!--
- <div class="ost">
- östliche Seitenleiste
- </div>
- -->
- </div>
- <!-- Fusszeile -->
- <!--
- <div class="sued">
- Fußzeile
- </div>
- -->
- <!-- Skripte -->
- <script src="/jslib/jquery/jquery.min.js"></script>
- <script src="/jslib/bootstrap/js/bootstrap.min.js"></script>
- <script src="/jslib/mustache/mustache.min.js"></script>
- <script src="ui.js"></script>
- <script type="text/javascript" charset="utf-8">
- //var ui;
- $(document).ready(function() {
- // init
- });
- </script>
- </body>
-</html>
diff --git a/web/ui2/js/app.js b/web/ui2/js/app.js
index f28d721..003c7e7 100644
--- a/web/ui2/js/app.js
+++ b/web/ui2/js/app.js
@@ -102,7 +102,7 @@
};
this.fm_hilfe = function() {
- window.open('/data/dok/wbx-doku.html#wbx-bedienung', '_blank');
+ window.open('/data/dok/wbx/bedienung.html#wbx-bedienung', '_blank');
};
this.fm_toggle_show_slideshow = function() {
--
Gitblit v1.9.3