From: Banana <mail@bananas-playground.net>
Date: Mon, 10 Apr 2023 07:45:48 +0000 (+0200)
Subject: first steps with the 98 theme
X-Git-Tag: 1.5~30
X-Git-Url: http://91.132.146.200/gitweb/?a=commitdiff_plain;h=a28a9c425c4ab53c1d12fcc4c27a3f49153e262b;p=bibliotheca-php.git

first steps with the 98 theme
---

diff --git a/webclient/view/98/collections/collections.html b/webclient/view/98/collections/collections.html
new file mode 100644
index 0000000..9284efe
--- /dev/null
+++ b/webclient/view/98/collections/collections.html
@@ -0,0 +1,105 @@
+<?php if(!empty($TemplateData['pagination']) && $TemplateData['pagination']['pages'] > 1) { ?>
+<div class="uk-grid-small uk-grid-match uk-grid">
+	<div class="uk-width-1-3">
+		<ul class="uk-pagination" >
+			<?php require Summoner::themefile('collections/collections_pagination.html', UI_THEME); ?>
+		</ul>
+	</div>
+	<div class="uk-width-2-3">
+		<?php if(!isset($TemplateData['pagination']['hideSort'])) { ?>
+		<div class="uk-inline">
+			<button class="uk-button uk-button-default uk-button-small" type="button">Sort</button>
+			<div uk-dropdown>
+				<ul class="uk-nav uk-dropdown-nav">
+					<?php if(!empty($TemplateData['defaultSortField'])) { ?>
+					<li><a href="index.php?<?php echo Summoner::createFromParameterLinkQuery($TemplateData['pagination']['currentGetParameters'],array('s'=>$TemplateData['defaultSortField'],'sd'=>$TemplateData['defaultSortOrder'])); ?>">Default</a></li>
+					<?php } else { ?>
+					<li><a href="index.php?<?php echo Summoner::createFromParameterLinkQuery($TemplateData['pagination']['currentGetParameters'],array('s'=>'','sd'=>'ASC')); ?>">Latest</a></li>
+					<?php } ?>
+
+					<?php
+					if(!empty($TemplateData['simpleSearchFields'])) {
+						foreach($TemplateData['simpleSearchFields'] as $k=>$v) {
+					?>
+					<li class="<?php if(isset($v['selected'])) echo 'uk-active' ?>"><a href="index.php?<?php echo Summoner::createFromParameterLinkQuery($TemplateData['pagination']['currentGetParameters'],array('s'=>$k,'sd'=>'ASC')); ?>"><?php echo $v['displayname']; ?></a></li>
+					<?php
+						}
+					}
+					?>
+
+					<li class="uk-nav-divider"></li>
+					<li><a href="index.php?<?php echo Summoner::createFromParameterLinkQuery($TemplateData['pagination']['currentGetParameters'],array('sd'=>'DESC')); ?>"><span class="uk-icon uk-margin-small-right" uk-icon="icon: chevron-down"></span></a></li>
+					<li><a href="index.php?<?php echo Summoner::createFromParameterLinkQuery($TemplateData['pagination']['currentGetParameters'],array('sd'=>'ASC')); ?>"><span class="uk-icon uk-margin-small-right" uk-icon="icon: chevron-up"></span></a></li>
+				</ul>
+			</div>
+		</div>
+		<?php } ?>
+	</div>
+</div>
+<?php } ?>
+
+<?php if(!empty($TemplateData['search'])) { ?>
+<div uk-alert id="searchNotice">
+	<button class="uk-alert-close" type="button" uk-close></button>
+	<p>Display result for: <b><?php echo $TemplateData['search']; ?></b></p>
+</div>
+<script type="text/javascript">
+	UIkit.util.on('#searchNotice', 'hide', function () {
+		window.location.href="index.php?p=collections&collection=<?php echo $TemplateData['loadedCollection']['id']; ?>";
+	});
+</script>
+<?php } ?>
+
+<?php if(!empty($TemplateData['entries'])) { ?>
+<h3 class="uk-h3"><?php echo Summoner::ifset($TemplateData['loadedCollection'], 'name'); ?></h3>
+<div class="uk-grid-small uk-grid-match" uk-grid>
+	<?php foreach($TemplateData['entries']['results'] as $entryK=>$entry) { ?>
+	<div class="uk-width-1-4@s uk-width-1-6@l">
+		<div class="uk-card uk-card-default uk-card-small">
+			<div class="uk-card-media-top">
+				<?php if(Summoner::ifset($entry['fields'], 'coverimage')) { ?>
+				<a href="<?php echo $TemplateData['entryLinkPrefix']; ?>&id=<?php echo $entryK; ?>">
+				<img src="<?php echo $TemplateData['storagePath'].'/'.$entryK.'/'.$entry['fields']['coverimage']['value']; ?>"
+					 alt="<?php echo $entry['fields']['coverimage']['displayname']; ?>">
+				</a>
+				<?php } ?>
+			</div>
+			<div class="uk-card-body uk-visible@l">
+				<?php if(Summoner::ifset($entry['fields'], 'title')) { ?>
+				<h3 class="uk-card-title"><?php echo $entry['fields']['title']['value']; ?></h3>
+				<?php } ?>
+
+				<?php if(Summoner::ifset($entry['fields'], array('description','value'))) { ?>
+				<p><?php echo $entry['fields']['description']['value']; ?></p>
+				<?php } ?>
+			</div>
+			<div class="uk-card-footer">
+				<a href="<?php echo $TemplateData['entryLinkPrefix']; ?>&id=<?php echo $entryK; ?>" class="uk-button uk-button-text">View</a>
+			</div>
+		</div>
+	</div>
+	<?php } ?>
+</div>
+<?php } elseif(!empty($TemplateData['collections'])) { ?>
+<h3 class="uk-h3">Collection overview</h3>
+<div class="uk-grid-small uk-grid-row-small uk-grid-row-small" uk-grid>
+	<div class="uk-width-2-3@m uk-width-1-2@xl">
+		<dl class="uk-description-list uk-description-list-divider">
+			<?php foreach($TemplateData['collections'] as $k=>$v) { ?>
+			<dt><a href="index.php?p=collections&collection=<?php echo $k; ?>"><?php echo $v['name']; ?></a></dt>
+			<dd><?php echo $v['description']; ?></dd>
+			<?php } ?>
+		</dl>
+	</div>
+</div>
+<?php } ?>
+
+<?php if(!empty($TemplateData['pagination']) && $TemplateData['pagination']['pages'] > 1) { ?>
+<div class="uk-grid-small uk-grid-match uk-grid">
+	<div class="uk-width-3-4">
+		<ul class="uk-pagination" >
+			<?php require Summoner::themefile('collections/collections_pagination.html', UI_THEME); ?>
+		</ul>
+	</div>
+</div>
+<?php } ?>
diff --git a/webclient/view/98/collections/collections.php b/webclient/view/98/collections/collections.php
new file mode 100644
index 0000000..d4e28e7
--- /dev/null
+++ b/webclient/view/98/collections/collections.php
@@ -0,0 +1,191 @@
+<?php
+/**
+ * Bibliotheca
+ *
+ * Copyright 2018-2021 Johannes Keßler
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+require_once 'lib/mancubus.class.php';
+$Mancubus = new Mancubus($DB,$Doomguy);
+require_once 'lib/trite.class.php';
+$Trite = new Trite($DB,$Doomguy);
+
+$_collection = '';
+if(isset($_GET['collection']) && !empty($_GET['collection'])) {
+	$_collection = trim($_GET['collection']);
+	$_collection = Summoner::validate($_collection,'digit') ? $_collection : '';
+}
+
+// field identifier to search within
+$_fid = '';
+if(isset($_GET['fid']) && !empty($_GET['fid'])) {
+	$_fid = trim($_GET['fid']);
+	$_fid = Summoner::validate($_fid,'nospace') ? $_fid : '';
+}
+
+// field value to look up
+$_fv = false;
+if(isset($_GET['fv']) && !empty($_GET['fv'])) {
+	$_fv = trim($_GET['fv']);
+	$_fv = Summoner::validate($_fv) ? $_fv : false;
+}
+
+// nav search
+$_search = '';
+if(isset($_GET['navSearch'])) {
+	$_search = trim($_GET['navSearch']);
+	$_search = urldecode($_search);
+	$_search = Summoner::validate($_search) ? $_search : '';
+}
+
+## pagination
+$TemplateData['pagination'] = array('pages' => 0);
+
+$_curPage = 1;
+if(isset($_GET['page']) && !empty($_GET['page'])) {
+	$_curPage = trim($_GET['page']);
+	$_curPage = Summoner::validate($_curPage,'digit') ? $_curPage : 1;
+}
+
+$_sort = '';
+if(isset($_GET['s']) && !empty($_GET['s'])) {
+	$_sort = trim($_GET['s']);
+	$_sort = Summoner::validate($_sort,'nospace') ? $_sort : '';
+}
+
+$_sortDirection = '';
+if(isset($_GET['sd']) && !empty($_GET['sd'])) {
+	$_sortDirection = trim($_GET['sd']);
+	$_sortDirection = Summoner::validate($_sortDirection,'nospace') ? $_sortDirection : '';
+}
+
+$_queryOptions = array(
+	'limit' => RESULTS_PER_PAGE,
+	'offset' => (RESULTS_PER_PAGE * ($_curPage-1)),
+	'sort' => $_sort,
+	'sortDirection' => $_sortDirection
+);
+## pagination end
+
+$TemplateData['pageTitle'] = "Collection overview";
+$TemplateData['loadedCollection'] = array();
+$TemplateData['storagePath'] = '';
+$TemplateData['entries'] = array();
+$TemplateData['collections'] = array();
+$TemplateData['search'] = '';
+// needed for pagination link building
+$TemplateData['pagination']['currentGetParameters']['p'] = 'collections';
+$TemplateData['pagination']['currentGetParameters']['collection'] = $_collection;
+
+if(!empty($_collection)) {
+	$TemplateData['loadedCollection'] = $Trite->load($_collection);
+	if(!empty($TemplateData['loadedCollection'])) {
+		$Mancubus->setCollection($Trite->param('id'));
+
+		$TemplateData['defaultSortField'] = $Trite->param('defaultSortField');
+		$TemplateData['defaultSortOrder'] = $Trite->param('defaultSortOrder');
+		$TemplateData['simpleSearchFields'] = $Trite->getSimpleSearchFields();
+		if(!empty($_queryOptions['sort'])) {
+			$TemplateData['simpleSearchFields'][$_queryOptions['sort']]['selected'] = true;
+		}
+		if(!empty($TemplateData['defaultSortField'])) {
+			unset($TemplateData['simpleSearchFields'][$TemplateData['defaultSortField']]);
+			if(empty($_queryOptions['sort'])) {
+				$_queryOptions['sort'] = $TemplateData['defaultSortField'];
+			}
+		}
+		if(!empty($TemplateData['defaultSortOrder'])) {
+			if(empty($_queryOptions['sortDirection'])) {
+				$_queryOptions['sortDirection'] = $TemplateData['defaultSortOrder'];
+			}
+		}
+
+		$Mancubus->setQueryOptions($_queryOptions);
+
+		$TemplateData['storagePath'] = PATH_WEB_STORAGE . '/' . $Trite->param('id');
+		$TemplateData['entryLinkPrefix'] = "index.php?p=entry&collection=".$Trite->param('id');
+		$TemplateData['navSearchAction'] = array('p' => 'collections', 'collection' => $Trite->param('id'));
+
+		$_fd = $Trite->getCollectionFields();
+
+		$_sdata = array();
+		if (!empty($_fv) && !empty($_fid)) {
+			$_sdata[0] = array(
+				'colName' => $_fd[$_fid]['identifier'],
+				'colValue' => $_fv,
+				'fieldData' => $_fd[$_fid],
+				'exactTagMatch' => true
+			);
+			$_search = $_fv;
+			$TemplateData['pagination']['currentGetParameters']['fid'] = $_fid;
+			$TemplateData['pagination']['currentGetParameters']['fv'] = $_fv;
+		}
+		elseif(isset($_fd[$Trite->param('defaultSearchField')])) {
+			$_sdata[0] = array(
+				'colName' => $Trite->param('defaultSearchField'),
+				'colValue' => $_search,
+				'fieldData' =>$_fd[$Trite->param('defaultSearchField')]
+			);
+			if (!empty($_search)) {
+				$TemplateData['pagination']['hideSort'] = true;
+			}
+		}
+
+		$TemplateData['entries'] = $Mancubus->getEntries($_sdata);
+		if (!empty($_search)) {
+			$TemplateData['search'] = $_search;
+			$TemplateData['pagination']['currentGetParameters']['navSearch'] = urlencode($_search);
+		}
+
+		$TemplateData['pageTitle'] = $Trite->param('name');
+
+	}
+	else {
+		$TemplateData['message']['content'] = "Can not load given collection.";
+		$TemplateData['message']['status'] = "error";
+	}
+}
+else {
+	$TemplateData['collections'] = $Trite->getCollections();
+}
+
+# pagination
+if(!empty($TemplateData['entries']['amount'])) {
+	$TemplateData['pagination']['pages'] = (int)ceil($TemplateData['entries']['amount'] / RESULTS_PER_PAGE);
+	$TemplateData['pagination']['curPage'] = $_curPage;
+
+	$TemplateData['pagination']['currentGetParameters']['page'] = $_curPage;
+	$TemplateData['pagination']['currentGetParameters']['s'] = $_sort;
+	$TemplateData['pagination']['currentGetParameters']['sd'] = $_sortDirection;
+}
+
+if($TemplateData['pagination']['pages'] > 11) {
+	# first pages
+	$TemplateData['pagination']['visibleRange'] = range(1,3);
+	# last pages
+	foreach(range($TemplateData['pagination']['pages']-2, $TemplateData['pagination']['pages']) as $e) {
+		$TemplateData['pagination']['visibleRange'][] = $e;
+	}
+	# pages before and after current page
+	$cRange = range($TemplateData['pagination']['curPage']-1, $TemplateData['pagination']['curPage']+1);
+	foreach($cRange as $e) {
+		$TemplateData['pagination']['visibleRange'][] = $e;
+	}
+	$TemplateData['pagination']['currentRangeStart'] = array_shift($cRange);
+	$TemplateData['pagination']['currentRangeEnd'] = array_pop($cRange);
+}
+else {
+	$TemplateData['pagination']['visibleRange'] = range(1,$TemplateData['pagination']['pages']);
+}
+# pagination end
diff --git a/webclient/view/98/collections/collections_pagination.html b/webclient/view/98/collections/collections_pagination.html
new file mode 100644
index 0000000..633990c
--- /dev/null
+++ b/webclient/view/98/collections/collections_pagination.html
@@ -0,0 +1,32 @@
+<?php
+if($TemplateData['pagination']['curPage'] > 1) {
+	echo '<li><a href="index.php?'.Summoner::createFromParameterLinkQuery($TemplateData['pagination']['currentGetParameters'],array('page'=>($TemplateData['pagination']['curPage']-1))).'">
+						<span uk-pagination-previous></span></a></li>';
+}
+$ellipsisShown = 0;
+
+for($i=1;$i<=$TemplateData['pagination']['pages'];$i++) {
+	$active = '';
+	if($i == $TemplateData['pagination']['curPage']) $active = 'uk-active';
+
+	if(in_array($i,$TemplateData['pagination']['visibleRange'])) {
+		echo '<li class="'.$active.'"><a href="index.php?'.Summoner::createFromParameterLinkQuery($TemplateData['pagination']['currentGetParameters'],array('page'=>$i)).'"
+							title="Goto page '.$i.'">'.$i.'</a></li>';
+	}
+	else {
+		if($i < $TemplateData['pagination']['currentRangeStart'] && $ellipsisShown == 0) {
+			echo '<li class="uk-disabled"><span>&hellip;</span></li>';
+			$ellipsisShown = 1;
+		}
+		if($i > $TemplateData['pagination']['currentRangeEnd'] && ($ellipsisShown == 0 || $ellipsisShown == 1)) {
+			echo '<li class="uk-disabled"><span>&hellip;</span></li>';
+			$ellipsisShown = 2;
+		}
+	}
+}
+
+if($TemplateData['pagination']['curPage'] < $TemplateData['pagination']['pages']) {
+	echo '<li><a href="index.php?'.Summoner::createFromParameterLinkQuery($TemplateData['pagination']['currentGetParameters'],array('page'=>($TemplateData['pagination']['curPage']+1))).'">
+						<span uk-pagination-next></span></a></li>';
+}
+?>
diff --git a/webclient/view/98/dashboard/dashboard.html b/webclient/view/98/dashboard/dashboard.html
new file mode 100644
index 0000000..cf592f9
--- /dev/null
+++ b/webclient/view/98/dashboard/dashboard.html
@@ -0,0 +1,68 @@
+<?php if(!empty($TemplateData['search'])) { ?>
+<div class="window">
+	<div class="title-bar">
+		<div class="title-bar-text">Search</div>
+		<div class="title-bar-controls">
+			<button aria-label="Close" id="searchNoteWindowCloseButton"></button>
+		</div>
+	</div>
+	<div class="window-body">
+		<p>Display result for: <b><?php echo $TemplateData['search']; ?></b></p>
+	</div>
+</div>
+<script>
+	const searchNoteWindowCloseButton = document.getElementById('searchNoteWindowCloseButton');
+	searchNoteWindowCloseButton.addEventListener('click', () => {
+		window.location.href="index.php";
+	});
+</script>
+<?php } ?>
+
+<?php foreach($TemplateData['latest'] as $k=>$v) { ?>
+	<h4>
+		<a href="index.php?p=collections&collection=<?php echo $k; echo Summoner::ifset($TemplateData, 'navSearched'); ?>"><?php echo $v['name']; ?></a>
+		<?php echo $v['description']; ?>
+	</h4>
+	<?php if(isset($v['entries']['results'])) { ?>
+	<div class="sunken-panel">
+		<table width="100%">
+			<thead>
+				<tr>
+					<th>Image</th>
+					<th>Title</th>
+					<th>Description</th>
+					<th>View</th>
+				</tr>
+			</thead>
+			<tbody>
+			<?php foreach($v['entries']['results'] as $entryK=>$entry) { ?>
+				<tr>
+					<td>
+						<?php if(Summoner::ifset($entry['fields'], 'coverimage')) { ?>
+						<a href="index.php?p=entry&collection=<?php echo $k ?>&id=<?php echo $entryK; ?>">
+							<img src="<?php echo PATH_WEB_STORAGE.'/'.$k.'/'.$entryK.'/'.$entry['fields']['coverimage']['value']; ?>"
+							     alt="<?php echo $entry['fields']['coverimage']['displayname']; ?>"
+							width="50px">
+						</a>
+						<?php } ?>
+					</td>
+					<td>
+						<?php if(Summoner::ifset($entry['fields'], 'title')) {
+							echo $entry['fields']['title']['value'];
+						} ?>
+					</td>
+					<td>
+						<?php if(Summoner::ifset($entry['fields'], array('description','value'))) {
+							echo $entry['fields']['description']['value'];
+						} ?>
+					</td>
+					<td>
+						<a href="index.php?p=entry&collection=<?php echo $k ?>&id=<?php echo $entryK; ?>">View</a>
+					</td>
+				</tr>
+			<?php } ?>
+			</tbody>
+		</table>
+	</div>
+	<?php } ?>
+<?php } ?>
diff --git a/webclient/view/98/dashboard/dashboard.php b/webclient/view/98/dashboard/dashboard.php
new file mode 100644
index 0000000..71823c9
--- /dev/null
+++ b/webclient/view/98/dashboard/dashboard.php
@@ -0,0 +1,35 @@
+<?php
+/**
+ * Bibliotheca
+ *
+ * Copyright 2018-2020 Johannes Keßler
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+require_once 'lib/mancubus.class.php';
+$Mancubus = new Mancubus($DB,$Doomguy);
+
+$TemplateData['search'] = false;
+
+$_search = '';
+if(isset($_GET['navSearch'])) {
+	$_search = trim($_GET['navSearch']);
+	$_search = urldecode($_search);
+	$_search = Summoner::validate($_search,'text') ? $_search : '';
+	$TemplateData['navSearched'] = '&navSearch='.urlencode($_search);
+}
+
+$TemplateData['latest'] = $Mancubus->getLatest(5,5,$_search);
+if (!empty($_search)) {
+	$TemplateData['search'] = $_search;
+}
diff --git a/webclient/view/98/main.php b/webclient/view/98/main.php
new file mode 100644
index 0000000..d579958
--- /dev/null
+++ b/webclient/view/98/main.php
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="UTF-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+
+	<link type="text/css" rel="stylesheet" href="view/98/ui/css/98.min.css" />
+	<link type="text/css" rel="stylesheet" href="view/98/ui/css/style.css" />
+
+	<meta name="author" content="https://www.bananas-playground.net/projekt/bibliotheca" />
+	<title><?php echo $TemplateData['pageTitle']; ?> - Bibliotheca</title>
+</head>
+<body>
+	<header>
+		<?php require_once $ViewMenu; ?>
+	</header>
+
+	<div class="window" role="tabpanel">
+		<main class="window-body">
+			<?php require_once $ViewMessage; ?>
+			<?php require_once $View; ?>
+		</main>
+		<footer class="status-bar">
+			<p class="status-bar-field"><a href="https://www.bananas-playground.net/projekt/bibliotheca/" target=_blank>Bibliotheca</a></p>
+			<p class="status-bar-field">&copy; 2018 - <?php echo date('Y'); ?></p>
+		</footer>
+	</div>
+
+</body>
+</html>
diff --git a/webclient/view/98/system/menu.php b/webclient/view/98/system/menu.php
new file mode 100644
index 0000000..e32bee2
--- /dev/null
+++ b/webclient/view/98/system/menu.php
@@ -0,0 +1,96 @@
+<?php
+/**
+ * Bibliotheca
+ *
+ * Copyright 2018-2023 Johannes Keßler
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+## optional context action
+# the key has to match the column contextaction of the menuentry
+# $_collection comes from the $Viewscript
+$_contextActions = array();
+if(!empty($_collection)) {
+	$_contextActions['collection'] = $_collection;
+}
+
+$_menuShow = $Gorenest->get('show');
+$_menuManage = $Gorenest->get('manage', false, $_contextActions);
+?>
+
+<menu role="tablist">
+
+	<?php foreach($_menuShow as $entry) { ?>
+		<li role="tab" <?php if($_requestMode == $entry['action']) echo 'aria-selected="true"'; ?>>
+			<a href="index.php?p=<?php echo $entry['action']; ?>"><?php echo $entry['text']; ?></a>
+		</li>
+	<?php }
+	if(!empty($_menuManage)) {
+		foreach($_menuManage as $entry) { ?>
+			<li role="tab" <?php if($_requestMode == $entry['action']) echo 'aria-selected="true"'; ?>>
+				<a href="index.php?p=<?php echo $entry['action']; ?>"><?php echo $entry['text']; ?></a>
+			</li>
+		<?php }
+	} ?>
+	<li role="tab">
+		<a href="index.php?p=auth">
+			<?php if($Doomguy->isSignedIn() === true) { echo "Logout"; } else { echo "Login"; } ?>
+		</a>
+	</li>
+	<li role="tab">
+		<a id="showNavSearch" href="#" onclick="showNavSearch();">Search</a>
+	</li>
+	<li role="tag" <?php if($_requestMode == 'advancedsearch') echo 'aria-selected="true"'; ?>>
+		<a href="index.php?p=advancedsearch">Advanced search</a>
+	</li>
+</menu>
+
+<dialog id="navSearchDialog" class="window">
+	<div class="title-bar">
+		<div class="title-bar-text">Search</div>
+		<div class="title-bar-controls">
+			<button aria-label="Close" id="closeNavSearchDialog"></button>
+		</div>
+	</div>
+	<div class="window-body">
+		<form method="get" action="index.php">
+			<?php
+			if(isset($TemplateData['navSearchAction'])) {
+				foreach($TemplateData['navSearchAction'] as $param=>$pValue) {
+					echo '<input type="hidden" name="'.$param.'" value="'.$pValue.'" />';
+				}
+			}
+			?>
+			<input type="search" placeholder="Search..." name="navSearch" autofocus>
+			<input type="submit" value="Search" />
+			<p><a href="index.php?p=advancedsearch">Advanced</a></p>
+		</form>
+	</div>
+	<div class="status-bar">
+		<p class="status-bar-field">Press enter to search</p>
+		<p class="status-bar-field">Search within the default search field</p>
+	</div>
+</dialog>
+
+<script>
+	const navSearchDialog = document.getElementById('navSearchDialog');
+	const closeNavSearchDialog = document.getElementById('closeNavSearchDialog');
+
+	function showNavSearch() {
+		navSearchDialog.showModal();
+	}
+
+	closeNavSearchDialog.addEventListener('click', () => {
+		navSearchDialog.close();
+	});
+</script>
diff --git a/webclient/view/98/system/message.php b/webclient/view/98/system/message.php
new file mode 100644
index 0000000..8f1c14d
--- /dev/null
+++ b/webclient/view/98/system/message.php
@@ -0,0 +1,47 @@
+<?php
+/**
+ * Bibliotheca
+ *
+ * Copyright 2018-2020 Johannes Keßler
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+if(isset($TemplateData['message']['content'])) {
+	$cssClass = '';
+	$headlineText = 'Information';
+	if(isset($TemplateData['message']['status'])) {
+		switch($TemplateData['message']['status']) {
+			case 'error':
+				$cssClass = 'danger';
+				$headlineText = 'Error';
+			break;
+			case 'warning':
+				$cssClass = 'warning';
+				$headlineText = 'Warning';
+			break;
+			case 'success':
+				$cssClass = 'success';
+				$headlineText = 'Success';
+			break;
+
+			case 'info':
+			default:
+
+		}
+	}
+?>
+<div class="title-bar <?php echo $cssClass; ?>">
+	<div class="title-bar-text"><?php echo $headlineText; ?></div>
+</div>
+<p><?php echo $TemplateData['message']['content']; ?></p>
+<?php } ?>
diff --git a/webclient/view/98/ui/css/98.min.css b/webclient/view/98/ui/css/98.min.css
new file mode 100644
index 0000000..08a1a51
--- /dev/null
+++ b/webclient/view/98/ui/css/98.min.css
@@ -0,0 +1 @@
+/*! 98.css v0.1.20 - https://github.com/jdan/98.css */@font-face{font-family:"Pixelated MS Sans Serif";font-style:normal;font-weight:400;src:url(ms_sans_serif.woff) format("woff");src:url(ms_sans_serif.woff2) format("woff2")}@font-face{font-family:"Pixelated MS Sans Serif";font-style:normal;font-weight:700;src:url(ms_sans_serif_bold.woff) format("woff");src:url(ms_sans_serif_bold.woff2) format("woff2")}body{color:#222;font-family:Arial;font-size:12px}.title-bar,.window,button,input,label,option,select,table,textarea,ul.tree-view{-webkit-font-smoothing:none;font-family:"Pixelated MS Sans Serif",Arial;font-size:11px}h1{font-size:5rem}h2{font-size:2.5rem}h3{font-size:2rem}h4{font-size:1.5rem}u{border-bottom:.5px solid #222;text-decoration:none}button,input[type=reset],input[type=submit]{border:none;border-radius:0;box-sizing:border-box;color:transparent;min-height:23px;min-width:75px;padding:0 12px;text-shadow:0 0 #222}.vertical-bar,button,input[type=reset],input[type=submit]{background:silver;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px grey,inset 2px 2px #dfdfdf}.vertical-bar{height:20px;width:4px}button:not(:disabled):active,input[type=reset]:not(:disabled):active,input[type=submit]:not(:disabled):active{box-shadow:inset -1px -1px #fff,inset 1px 1px #0a0a0a,inset -2px -2px #dfdfdf,inset 2px 2px grey;text-shadow:1px 1px #222}@media (not(hover)){button:not(:disabled):hover,input[type=reset]:not(:disabled):hover,input[type=submit]:not(:disabled):hover{box-shadow:inset -1px -1px #fff,inset 1px 1px #0a0a0a,inset -2px -2px #dfdfdf,inset 2px 2px grey}}button:focus,input[type=reset]:focus,input[type=submit]:focus{outline:1px dotted #000;outline-offset:-4px}button::-moz-focus-inner,input[type=reset]::-moz-focus-inner,input[type=submit]::-moz-focus-inner{border:0}:disabled,:disabled+label,input[readonly],input[readonly]+label{color:grey}:disabled+label,button:disabled,input[type=reset]:disabled,input[type=submit]:disabled{text-shadow:1px 1px 0 #fff}.window{background:silver;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #dfdfdf,inset -2px -2px grey,inset 2px 2px #fff;padding:3px}.title-bar{align-items:center;background:linear-gradient(90deg,navy,#1084d0);display:flex;justify-content:space-between;padding:3px 2px 3px 3px}.title-bar.inactive{background:linear-gradient(90deg,grey,#b5b5b5)}.title-bar-text{color:#fff;font-weight:700;letter-spacing:0;margin-right:24px}.title-bar-controls{display:flex}.title-bar-controls button{display:block;min-height:14px;min-width:16px;padding:0}.title-bar-controls button:active{padding:0}.title-bar-controls button:focus{outline:none}.title-bar-controls button[aria-label=Minimize]{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='6' height='2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M0 0h6v2H0z'/%3E%3C/svg%3E");background-position:bottom 3px left 4px;background-repeat:no-repeat}.title-bar-controls button[aria-label=Maximize]{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='9' height='9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 0H0v9h9V0zM8 2H1v6h7V2z' fill='%23000'/%3E%3C/svg%3E");background-position:top 2px left 3px;background-repeat:no-repeat}.title-bar-controls button[aria-label=Restore]{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='8' height='9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M2 0h6v2H2zM7 2h1v4H7zM2 2h1v1H2zM6 5h1v1H6zM0 3h6v2H0zM5 5h1v4H5zM0 5h1v4H0zM1 8h4v1H1z'/%3E%3C/svg%3E");background-position:top 2px left 3px;background-repeat:no-repeat}.title-bar-controls button[aria-label=Help]{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='6' height='9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M0 1h2v2H0zM1 0h4v1H1zM4 1h2v2H4zM3 3h2v1H3zM2 4h2v2H2zM2 7h2v2H2z'/%3E%3C/svg%3E");background-position:top 2px left 5px;background-repeat:no-repeat}.title-bar-controls button[aria-label=Close]{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='8' height='7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0h2v1h1v1h2V1h1V0h2v1H7v1H6v1H5v1h1v1h1v1h1v1H6V6H5V5H3v1H2v1H0V6h1V5h1V4h1V3H2V2H1V1H0V0z' fill='%23000'/%3E%3C/svg%3E");background-position:top 3px left 4px;background-repeat:no-repeat;margin-left:2px}.status-bar{gap:1px;display:flex;margin:0 1px}.status-bar-field{box-shadow:inset -1px -1px #dfdfdf,inset 1px 1px grey;flex-grow:1;margin:0;padding:2px 3px}.window-body{margin:8px}fieldset{border-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='5' height='5' fill='gray' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0h5v5H0V2h2v1h1V2H0' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0h4v4H0V1h1v2h2V1H0'/%3E%3C/svg%3E") 2;margin:0;padding:10px;padding-block-start:8px}legend{background:silver}.field-row{align-items:center;display:flex}[class^=field-row]+[class^=field-row]{margin-top:6px}.field-row>*+*{margin-left:6px}.field-row-stacked{display:flex;flex-direction:column}.field-row-stacked *+*{margin-top:6px}label{align-items:center;display:inline-flex}input[type=checkbox],input[type=radio]{appearance:none;-webkit-appearance:none;-moz-appearance:none;background:0;border:none;margin:0;opacity:0;position:fixed}input[type=checkbox]+label,input[type=radio]+label{line-height:13px}input[type=radio]+label{margin-left:18px;position:relative}input[type=radio]+label:before{background:url("data:image/svg+xml;charset=utf-8,%3Csvg width='12' height='12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 0H4v1H2v1H1v2H0v4h1v2h1V8H1V4h1V2h2V1h4v1h2V1H8V0z' fill='gray'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 1H4v1H2v2H1v4h1v1h1V8H2V4h1V3h1V2h4v1h2V2H8V1z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 3h1v1H9V3zm1 5V4h1v4h-1zm-2 2V9h1V8h1v2H8zm-4 0v1h4v-1H4zm0 0V9H2v1h2z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 2h-1v2h1v4h-1v2H8v1H4v-1H2v1h2v1h4v-1h2v-1h1V8h1V4h-1V2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4 2h4v1h1v1h1v4H9v1H8v1H4V9H3V8H2V4h1V3h1V2z' fill='%23fff'/%3E%3C/svg%3E");content:"";display:inline-block;height:12px;left:-18px;margin-right:6px;position:absolute;top:0;width:12px}input[type=radio]:active+label:before{background:url("data:image/svg+xml;charset=utf-8,%3Csvg width='12' height='12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 0H4v1H2v1H1v2H0v4h1v2h1V8H1V4h1V2h2V1h4v1h2V1H8V0z' fill='gray'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 1H4v1H2v2H1v4h1v1h1V8H2V4h1V3h1V2h4v1h2V2H8V1z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 3h1v1H9V3zm1 5V4h1v4h-1zm-2 2V9h1V8h1v2H8zm-4 0v1h4v-1H4zm0 0V9H2v1h2z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 2h-1v2h1v4h-1v2H8v1H4v-1H2v1h2v1h4v-1h2v-1h1V8h1V4h-1V2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4 2h4v1h1v1h1v4H9v1H8v1H4V9H3V8H2V4h1V3h1V2z' fill='silver'/%3E%3C/svg%3E")}input[type=radio]:checked+label:after{background:url("data:image/svg+xml;charset=utf-8,%3Csvg width='4' height='4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3 0H1v1H0v2h1v1h2V3h1V1H3V0z' fill='%23000'/%3E%3C/svg%3E");content:"";display:block;height:4px;left:-14px;position:absolute;top:4px;width:4px}input[type=checkbox]:focus+label,input[type=radio]:focus+label{outline:1px dotted #000}input[type=radio][disabled]+label:before{background:url("data:image/svg+xml;charset=utf-8,%3Csvg width='12' height='12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 0H4v1H2v1H1v2H0v4h1v2h1V8H1V4h1V2h2V1h4v1h2V1H8V0z' fill='gray'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 1H4v1H2v2H1v4h1v1h1V8H2V4h1V3h1V2h4v1h2V2H8V1z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 3h1v1H9V3zm1 5V4h1v4h-1zm-2 2V9h1V8h1v2H8zm-4 0v1h4v-1H4zm0 0V9H2v1h2z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 2h-1v2h1v4h-1v2H8v1H4v-1H2v1h2v1h4v-1h2v-1h1V8h1V4h-1V2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4 2h4v1h1v1h1v4H9v1H8v1H4V9H3V8H2V4h1V3h1V2z' fill='silver'/%3E%3C/svg%3E")}input[type=radio][disabled]:checked+label:after{background:url("data:image/svg+xml;charset=utf-8,%3Csvg width='4' height='4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3 0H1v1H0v2h1v1h2V3h1V1H3V0z' fill='gray'/%3E%3C/svg%3E")}input[type=checkbox]+label{margin-left:19px;position:relative}input[type=checkbox]+label:before{background:#fff;box-shadow:inset -1px -1px #fff,inset 1px 1px grey,inset -2px -2px #dfdfdf,inset 2px 2px #0a0a0a;content:"";display:inline-block;height:13px;left:-19px;margin-right:6px;position:absolute;width:13px}input[type=checkbox]:active+label:before{background:silver}input[type=checkbox]:checked+label:after{background:url("data:image/svg+xml;charset=utf-8,%3Csvg width='7' height='7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7 0H6v1H5v1H4v1H3v1H2V3H1V2H0v3h1v1h1v1h1V6h1V5h1V4h1V3h1V0z' fill='%23000'/%3E%3C/svg%3E");content:"";display:block;height:7px;left:-16px;position:absolute;top:3px;width:7px}input[type=checkbox][disabled]+label:before{background:silver}input[type=checkbox][disabled]:checked+label:after{background:url("data:image/svg+xml;charset=utf-8,%3Csvg width='7' height='7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7 0H6v1H5v1H4v1H3v1H2V3H1V2H0v3h1v1h1v1h1V6h1V5h1V4h1V3h1V0z' fill='gray'/%3E%3C/svg%3E")}input[type=email],input[type=number],input[type=password],input[type=text]{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;border-radius:0}input[type=email],input[type=number],input[type=password],input[type=text],select{background-color:#fff;box-shadow:inset -1px -1px #fff,inset 1px 1px grey,inset -2px -2px #dfdfdf,inset 2px 2px #0a0a0a;box-sizing:border-box;padding:3px 4px}select,textarea{border:none}textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border-radius:0;box-shadow:inset -1px -1px #fff,inset 1px 1px grey,inset -2px -2px #dfdfdf,inset 2px 2px #0a0a0a;box-sizing:border-box;padding:3px 4px}input[type=email],input[type=password],input[type=text],select{height:21px}input[type=number]{height:22px}input[type=email],input[type=number],input[type=password],input[type=text]{line-height:2}input[type=email]:disabled,input[type=email]:read-only,input[type=number]:disabled,input[type=number]:read-only,input[type=password]:disabled,input[type=password]:read-only,input[type=text]:disabled,input[type=text]:read-only,textarea:disabled{background-color:silver}select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0v16h1V1h14V0z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1v14h1V2h12V1H2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H0v-1h15V0h1v17z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1h-1v14H1v1h14V1z' fill='gray'/%3E%3Cpath fill='silver' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 6H4v1h1v1h1v1h1v1h1V9h1V8h1V7h1V6z' fill='%23000'/%3E%3C/svg%3E");background-position:top 2px right 2px;background-repeat:no-repeat;border-radius:0;padding-right:32px;position:relative}input[type=email]:focus,input[type=number]:focus,input[type=password]:focus,input[type=text]:focus,select:focus,textarea:focus{outline:none}input[type=range]{-webkit-appearance:none;background:transparent;width:100%}input[type=range]:focus{outline:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:url("data:image/svg+xml;charset=utf-8,%3Csvg width='11' height='21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0v16h2v2h2v2h1v-1H3v-2H1V1h9V0z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1 1v15h1v1h1v1h1v1h2v-1h1v-1h1v-1h1V1z' fill='%23C0C7C8'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 1h1v15H8v2H6v2H5v-1h2v-2h2z' fill='%2387888F'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 0h1v16H9v2H7v2H5v1h1v-2h2v-2h2z' fill='%23000'/%3E%3C/svg%3E");border:none;box-shadow:none;height:21px;transform:translateY(-8px);width:11px}input[type=range].has-box-indicator::-webkit-slider-thumb{background:url("data:image/svg+xml;charset=utf-8,%3Csvg width='11' height='21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0v20h1V1h9V0z' fill='%23fff'/%3E%3Cpath fill='%23C0C7C8' d='M1 1h8v18H1z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 1h1v19H1v-1h8z' fill='%2387888F'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 0h1v21H0v-1h10z' fill='%23000'/%3E%3C/svg%3E");transform:translateY(-10px)}input[type=range]::-moz-range-thumb{background:url("data:image/svg+xml;charset=utf-8,%3Csvg width='11' height='21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0v16h2v2h2v2h1v-1H3v-2H1V1h9V0z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1 1v15h1v1h1v1h1v1h2v-1h1v-1h1v-1h1V1z' fill='%23C0C7C8'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 1h1v15H8v2H6v2H5v-1h2v-2h2z' fill='%2387888F'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 0h1v16H9v2H7v2H5v1h1v-2h2v-2h2z' fill='%23000'/%3E%3C/svg%3E");border:0;border-radius:0;height:21px;transform:translateY(2px);width:11px}input[type=range].has-box-indicator::-moz-range-thumb{background:url("data:image/svg+xml;charset=utf-8,%3Csvg width='11' height='21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0v20h1V1h9V0z' fill='%23fff'/%3E%3Cpath fill='%23C0C7C8' d='M1 1h8v18H1z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 1h1v19H1v-1h8z' fill='%2387888F'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 0h1v21H0v-1h10z' fill='%23000'/%3E%3C/svg%3E");transform:translateY(0)}input[type=range]::-webkit-slider-runnable-track{background:#000;border-bottom:1px solid grey;border-right:1px solid grey;box-shadow:1px 0 0 #fff,1px 1px 0 #fff,0 1px 0 #fff,-1px 0 0 #a9a9a9,-1px -1px 0 #a9a9a9,0 -1px 0 #a9a9a9,-1px 1px 0 #fff,1px -1px #a9a9a9;box-sizing:border-box;height:2px;width:100%}input[type=range]::-moz-range-track{background:#000;border-bottom:1px solid grey;border-right:1px solid grey;box-shadow:1px 0 0 #fff,1px 1px 0 #fff,0 1px 0 #fff,-1px 0 0 #a9a9a9,-1px -1px 0 #a9a9a9,0 -1px 0 #a9a9a9,-1px 1px 0 #fff,1px -1px #a9a9a9;box-sizing:border-box;height:2px;width:100%}.is-vertical{display:inline-block;height:150px;transform:translateY(50%);width:4px}.is-vertical>input[type=range]{height:4px;margin:0 16px 0 10px;transform:rotate(270deg) translateX(calc(-50% + 8px));transform-origin:left;width:150px}.is-vertical>input[type=range]::-webkit-slider-runnable-track{border-bottom:1px solid grey;border-left:1px solid grey;border-right:0;box-shadow:-1px 0 0 #fff,-1px 1px 0 #fff,0 1px 0 #fff,1px 0 0 #a9a9a9,1px -1px 0 #a9a9a9,0 -1px 0 #a9a9a9,1px 1px 0 #fff,-1px -1px #a9a9a9}.is-vertical>input[type=range]::-moz-range-track{border-bottom:1px solid grey;border-left:1px solid grey;border-right:0;box-shadow:-1px 0 0 #fff,-1px 1px 0 #fff,0 1px 0 #fff,1px 0 0 #a9a9a9,1px -1px 0 #a9a9a9,0 -1px 0 #a9a9a9,1px 1px 0 #fff,-1px -1px #a9a9a9}.is-vertical>input[type=range]::-webkit-slider-thumb{transform:translateY(-8px) scaleX(-1)}.is-vertical>input[type=range].has-box-indicator::-webkit-slider-thumb{transform:translateY(-10px) scaleX(-1)}.is-vertical>input[type=range]::-moz-range-thumb{transform:translateY(2px) scaleX(-1)}.is-vertical>input[type=range].has-box-indicator::-moz-range-thumb{transform:translateY(0) scaleX(-1)}select:focus{background-color:navy;color:#fff}select:focus option{background-color:#fff;color:#000}select:active{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0h16v17H0V0zm1 16h14V1H1v15z' fill='gray'/%3E%3Cpath fill='silver' d='M1 1h14v15H1z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 7H5v1h1v1h1v1h1v1h1v-1h1V9h1V8h1V7z' fill='%23000'/%3E%3C/svg%3E")}a{color:#00f}a:focus{outline:1px dotted #00f}ul.tree-view{background:#fff;box-shadow:inset -1px -1px #fff,inset 1px 1px grey,inset -2px -2px #dfdfdf,inset 2px 2px #0a0a0a;display:block;margin:0;padding:6px}ul.tree-view li{list-style-type:none}ul.tree-view a{color:#000;text-decoration:none}ul.tree-view a:focus{background-color:navy;color:#fff}ul.tree-view li,ul.tree-view ul{margin-top:3px}ul.tree-view ul{border-left:1px dotted grey;margin-left:16px;padding-left:16px}ul.tree-view ul>li{position:relative}ul.tree-view ul>li:before{border-bottom:1px dotted grey;content:"";display:block;left:-16px;position:absolute;top:6px;width:12px}ul.tree-view ul>li:last-child:after{background:#fff;bottom:0;content:"";display:block;left:-20px;position:absolute;top:7px;width:8px}ul.tree-view details{margin-top:0}ul.tree-view details[open] summary{margin-bottom:0}ul.tree-view ul details>summary:before{margin-left:-22px;position:relative;z-index:1}ul.tree-view details>summary:before{background-color:#fff;border:1px solid grey;content:"+";display:block;float:left;height:9px;line-height:8px;margin-right:5px;padding-left:1px;text-align:center;width:8px}ul.tree-view details[open]>summary:before{content:"-"}ul.tree-view details>summary::-webkit-details-marker,ul.tree-view details>summary::marker{content:""}pre{background:#fff;box-shadow:inset -1px -1px #fff,inset 1px 1px grey,inset -2px -2px #dfdfdf,inset 2px 2px #0a0a0a;display:block;margin:0;padding:12px 8px}code,code *{font-family:monospace}summary:focus{outline:1px dotted #000}::-webkit-scrollbar{width:16px}::-webkit-scrollbar:horizontal{height:17px}::-webkit-scrollbar-corner{background:#dfdfdf}::-webkit-scrollbar-track{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='2' height='2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1 0H0v1h1v1h1V1H1V0z' fill='silver'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 0H1v1H0v1h1V1h1V0z' fill='%23fff'/%3E%3C/svg%3E")}::-webkit-scrollbar-thumb{background-color:#dfdfdf;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px grey,inset 2px 2px #dfdfdf}::-webkit-scrollbar-button:horizontal:end:increment,::-webkit-scrollbar-button:horizontal:start:decrement,::-webkit-scrollbar-button:vertical:end:increment,::-webkit-scrollbar-button:vertical:start:decrement{display:block}::-webkit-scrollbar-button:vertical:start{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0v16h1V1h14V0z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1v14h1V2h12V1H2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H0v-1h15V0h1v17z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1h-1v14H1v1h14V1z' fill='gray'/%3E%3Cpath fill='silver' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 6H7v1H6v1H5v1H4v1h7V9h-1V8H9V7H8V6z' fill='%23000'/%3E%3C/svg%3E");height:17px}::-webkit-scrollbar-button:vertical:end{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0v16h1V1h14V0z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1v14h1V2h12V1H2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H0v-1h15V0h1v17z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1h-1v14H1v1h14V1z' fill='gray'/%3E%3Cpath fill='silver' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 6H4v1h1v1h1v1h1v1h1V9h1V8h1V7h1V6z' fill='%23000'/%3E%3C/svg%3E");height:17px}::-webkit-scrollbar-button:horizontal:start{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0v16h1V1h14V0z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1v14h1V2h12V1H2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H0v-1h15V0h1v17z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1h-1v14H1v1h14V1z' fill='gray'/%3E%3Cpath fill='silver' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 4H8v1H7v1H6v1H5v1h1v1h1v1h1v1h1V4z' fill='%23000'/%3E%3C/svg%3E");width:16px}::-webkit-scrollbar-button:horizontal:end{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0v16h1V1h14V0z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1v14h1V2h12V1H2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H0v-1h15V0h1v17z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1h-1v14H1v1h14V1z' fill='gray'/%3E%3Cpath fill='silver' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7 4H6v7h1v-1h1V9h1V8h1V7H9V6H8V5H7V4z' fill='%23000'/%3E%3C/svg%3E");width:16px}.window[role=tabpanel]{position:relative;z-index:2}menu[role=tablist]{display:flex;list-style-type:none;margin:0 0 -2px;padding-left:3px;position:relative;text-indent:0}menu[role=tablist]>li{border-top-left-radius:3px;border-top-right-radius:3px;box-shadow:inset -1px 0 #0a0a0a,inset 1px 1px #dfdfdf,inset -2px 0 grey,inset 2px 2px #fff;z-index:1}menu[role=tablist]>li[aria-selected=true]{background-color:silver;margin-left:-3px;margin-top:-2px;padding-bottom:2px;position:relative;z-index:8}menu[role=tablist]>li>a{color:#222;display:block;margin:6px;text-decoration:none}menu[role=tablist]>li[aria-selected=true]>a:focus{outline:none}menu[role=tablist]>li>a:focus{outline:1px dotted #222}menu[role=tablist].multirows>li{flex-grow:1;text-align:center}.sunken-panel{border:2px groove transparent;border-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='5' height='5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='gray' d='M0 0h4v1H0z'/%3E%3Cpath fill='gray' d='M0 0h1v4H0z'/%3E%3Cpath fill='%230a0a0a' d='M1 1h2v1H1z'/%3E%3Cpath fill='%230a0a0a' d='M1 1h1v2H1z'/%3E%3Cpath fill='%23fff' d='M0 4h5v1H0z'/%3E%3Cpath fill='%23fff' d='M4 0h1v5H4z'/%3E%3Cpath fill='%23dfdfdf' d='M3 1h1v3H3z'/%3E%3Cpath fill='%23dfdfdf' d='M1 3h3v1H1z'/%3E%3C/svg%3E") 2;box-sizing:border-box;overflow:auto}.sunken-panel,table{background-color:#fff}table{border-collapse:collapse;position:relative;text-align:left;white-space:nowrap}table>thead>tr>*{background:silver;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px grey,inset 2px 2px #dfdfdf;box-sizing:border-box;font-weight:400;height:17px;padding:0 6px;position:sticky;top:0}table.interactive>tbody>tr{cursor:pointer}table>tbody>tr.highlighted{background-color:navy;color:#fff}table>tbody>tr>*{height:14px;padding:0 6px}
diff --git a/webclient/view/98/ui/css/icon/button-down-active.svg b/webclient/view/98/ui/css/icon/button-down-active.svg
new file mode 100644
index 0000000..0ef5732
--- /dev/null
+++ b/webclient/view/98/ui/css/icon/button-down-active.svg
@@ -0,0 +1,5 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H15H16V17H15H0V16V1V0ZM1 16H15V1H1V16Z" fill="#808080"/>
+<rect x="1" y="1" width="14" height="15" fill="#C0C0C0"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 7H5V8H6V9H7V10H8V11H9V10H10V9H11V8H12V7Z" fill="black"/>
+</svg>
diff --git a/webclient/view/98/ui/css/icon/button-down.svg b/webclient/view/98/ui/css/icon/button-down.svg
new file mode 100644
index 0000000..2d0b52b
--- /dev/null
+++ b/webclient/view/98/ui/css/icon/button-down.svg
@@ -0,0 +1,8 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15 0H0V1V16H1V1H15V0Z" fill="#DFDFDF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 1H1V15H2V2H14V1H2Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16 17H15H0V16H15V0H16V17Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15 1H14V15H1V16H14H15V1Z" fill="#808080"/>
+<rect x="2" y="2" width="12" height="13" fill="#C0C0C0"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11 6H4V7H5V8H6V9H7V10H8V9H9V8H10V7H11V6Z" fill="black"/>
+</svg>
diff --git a/webclient/view/98/ui/css/icon/button-left.svg b/webclient/view/98/ui/css/icon/button-left.svg
new file mode 100644
index 0000000..f31b886
--- /dev/null
+++ b/webclient/view/98/ui/css/icon/button-left.svg
@@ -0,0 +1,8 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15 0H0V1V16H1V1H15V0Z" fill="#DFDFDF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 1H1V15H2V2H14V1H2Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16 17H15H0V16H15V0H16V17Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15 1H14V15H1V16H14H15V1Z" fill="#808080"/>
+<rect x="2" y="2" width="12" height="13" fill="#C0C0C0"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9 4H8V5H7V6H6V7H5V8H6V9H7V10H8V11H9V4Z" fill="black"/>
+</svg>
diff --git a/webclient/view/98/ui/css/icon/button-right.svg b/webclient/view/98/ui/css/icon/button-right.svg
new file mode 100644
index 0000000..ddab662
--- /dev/null
+++ b/webclient/view/98/ui/css/icon/button-right.svg
@@ -0,0 +1,8 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15 0H0V1V16H1V1H15V0Z" fill="#DFDFDF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 1H1V15H2V2H14V1H2Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16 17H15H0V16H15V0H16V17Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15 1H14V15H1V16H14H15V1Z" fill="#808080"/>
+<rect x="2" y="2" width="12" height="13" fill="#C0C0C0"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7 4H6V11H7V10H8V9H9V8H10V7H9V6H8V5H7V4Z" fill="black"/>
+</svg>
diff --git a/webclient/view/98/ui/css/icon/button-up.svg b/webclient/view/98/ui/css/icon/button-up.svg
new file mode 100644
index 0000000..91f8d4f
--- /dev/null
+++ b/webclient/view/98/ui/css/icon/button-up.svg
@@ -0,0 +1,8 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15 0H0V1V16H1V1H15V0Z" fill="#DFDFDF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 1H1V15H2V2H14V1H2Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16 17H15H0V16H15V0H16V17Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15 1H14V15H1V16H14H15V1Z" fill="#808080"/>
+<rect x="2" y="2" width="12" height="13" fill="#C0C0C0"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 6H7V7H6V8H5V9H4V10H11V9H10V8H9V7H8V6Z" fill="black"/>
+</svg>
diff --git a/webclient/view/98/ui/css/icon/checkmark-disabled.svg b/webclient/view/98/ui/css/icon/checkmark-disabled.svg
new file mode 100644
index 0000000..ac065de
--- /dev/null
+++ b/webclient/view/98/ui/css/icon/checkmark-disabled.svg
@@ -0,0 +1,3 @@
+<svg width="7" height="7" viewBox="0 0 7 7" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7 0H6V1H5V2H4V3H3V4H2V3H1V2H0V5H1V6H2V7H3V6H4V5H5V4H6V3H7V0Z" fill="#808080"/>
+</svg>
diff --git a/webclient/view/98/ui/css/icon/checkmark.svg b/webclient/view/98/ui/css/icon/checkmark.svg
new file mode 100644
index 0000000..6a3bbb4
--- /dev/null
+++ b/webclient/view/98/ui/css/icon/checkmark.svg
@@ -0,0 +1,3 @@
+<svg width="7" height="7" viewBox="0 0 7 7" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7 0H6V1H5V2H4V3H3V4H2V3H1V2H0V5H1V6H2V7H3V6H4V5H5V4H6V3H7V0Z" fill="black"/>
+</svg>
diff --git a/webclient/view/98/ui/css/icon/close.svg b/webclient/view/98/ui/css/icon/close.svg
new file mode 100644
index 0000000..419a57a
--- /dev/null
+++ b/webclient/view/98/ui/css/icon/close.svg
@@ -0,0 +1,3 @@
+<svg width="8" height="7" viewBox="0 0 8 7" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H1H2V1H3V2H4H5V1H6V0H7H8V1H7V2H6V3H5V4H6V5H7V6H8V7H7H6V6H5V5H4H3V6H2V7H1H0V6H1V5H2V4H3V3H2V2H1V1H0V0Z" fill="black"/>
+</svg>
diff --git a/webclient/view/98/ui/css/icon/groupbox-border.svg b/webclient/view/98/ui/css/icon/groupbox-border.svg
new file mode 100644
index 0000000..38a6221
--- /dev/null
+++ b/webclient/view/98/ui/css/icon/groupbox-border.svg
@@ -0,0 +1,4 @@
+<svg width="5" height="5" viewBox="0 0 5 5" fill="grey" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H5V5H0V2H2V3H3V2H0" fill="white" />
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H4V4H0V1H1V3H3V1H0" fill="#808080" />
+</svg>
diff --git a/webclient/view/98/ui/css/icon/help.svg b/webclient/view/98/ui/css/icon/help.svg
new file mode 100644
index 0000000..20a3fda
--- /dev/null
+++ b/webclient/view/98/ui/css/icon/help.svg
@@ -0,0 +1,8 @@
+<svg width="6" height="9" viewBox="0 0 6 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="1" width="2" height="2" fill="black"/>
+<rect x="1" width="4" height="1" fill="black"/>
+<rect x="4" y="1" width="2" height="2" fill="black"/>
+<rect x="3" y="3" width="2" height="1" fill="black"/>
+<rect x="2" y="4" width="2" height="2" fill="black"/>
+<rect x="2" y="7" width="2" height="2" fill="black"/>
+</svg>
diff --git a/webclient/view/98/ui/css/icon/indicator-horizontal.svg b/webclient/view/98/ui/css/icon/indicator-horizontal.svg
new file mode 100644
index 0000000..f6db8b0
--- /dev/null
+++ b/webclient/view/98/ui/css/icon/indicator-horizontal.svg
@@ -0,0 +1,6 @@
+<svg width="11" height="21" viewBox="0 0 11 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0V16H2V18H4V20H5V19H3V17H1V1H10V0Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1 1V16H2V17H3V18H4V19H6V18H7V17H8V16H9V1Z" fill="#C0C7C8"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9 1H10V16H8V18H6V20H5V19H7V17H9Z" fill="#87888F"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10 0H11V16H9V18H7V20H5V21H6V19H8V17H10Z" fill="black"/>
+</svg>
diff --git a/webclient/view/98/ui/css/icon/indicator-rectangle-horizontal.svg b/webclient/view/98/ui/css/icon/indicator-rectangle-horizontal.svg
new file mode 100644
index 0000000..7d0d9b1
--- /dev/null
+++ b/webclient/view/98/ui/css/icon/indicator-rectangle-horizontal.svg
@@ -0,0 +1,6 @@
+<svg width="11" height="21" viewBox="0 0 11 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0V20H1V1H10V0Z" fill="white"/>
+<rect x="1" y="1" width="8" height="18" fill="#C0C7C8"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9 1H10V20H1V19H9Z" fill="#87888F"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10 0H11V21H0V20H10Z" fill="black"/>
+</svg>
diff --git a/webclient/view/98/ui/css/icon/maximize.svg b/webclient/view/98/ui/css/icon/maximize.svg
new file mode 100644
index 0000000..e9d4982
--- /dev/null
+++ b/webclient/view/98/ui/css/icon/maximize.svg
@@ -0,0 +1,3 @@
+<svg width="9" height="9" viewBox="0 0 9 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9 0H0V2V8V9H1H8H9V8V2V0ZM8 2H1V8H8V2Z" fill="black"/>
+</svg>
diff --git a/webclient/view/98/ui/css/icon/minimize.svg b/webclient/view/98/ui/css/icon/minimize.svg
new file mode 100644
index 0000000..a676778
--- /dev/null
+++ b/webclient/view/98/ui/css/icon/minimize.svg
@@ -0,0 +1,3 @@
+<svg width="6" height="2" viewBox="0 0 6 2" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="6" height="2" fill="black"/>
+</svg>
diff --git a/webclient/view/98/ui/css/icon/radio-border-disabled.svg b/webclient/view/98/ui/css/icon/radio-border-disabled.svg
new file mode 100644
index 0000000..fd003cd
--- /dev/null
+++ b/webclient/view/98/ui/css/icon/radio-border-disabled.svg
@@ -0,0 +1,7 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 0H4V1H2V2H1V4H0V8H1V10H2V8H1V4H2V2H4V1H8V2H10V1H8V0Z" fill="#808080"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 1H4V2H2V3V4H1V8H2V9H3V8H2V4H3V3H4V2H8V3H10V2H8V1Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9 3H10V4H9V3ZM10 8V4H11V8H10ZM8 10V9H9V8H10V9V10H8ZM4 10V11H8V10H4ZM4 10V9H2V10H4Z" fill="#DFDFDF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11 2H10V4H11V8H10V10H8V11H4V10H2V11H4V12H8V11H10V10H11V8H12V4H11V2Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4 2H8V3H9V4H10V8H9V9H8V10H4V9H3V8H2V4H3V3H4V2Z" fill="#C0C0C0"/>
+</svg>
diff --git a/webclient/view/98/ui/css/icon/radio-border.svg b/webclient/view/98/ui/css/icon/radio-border.svg
new file mode 100644
index 0000000..633be90
--- /dev/null
+++ b/webclient/view/98/ui/css/icon/radio-border.svg
@@ -0,0 +1,8 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 0H4V1H2V2H1V4H0V8H1V10H2V8H1V4H2V2H4V1H8V2H10V1H8V0Z" fill="#808080"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 1H4V2H2V3V4H1V8H2V9H3V8H2V4H3V3H4V2H8V3H10V2H8V1Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9 3H10V4H9V3ZM10 8V4H11V8H10ZM8 10V9H9V8H10V9V10H8ZM4 10V11H8V10H4ZM4 10V9H2V10H4Z" fill="#DFDFDF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11 2H10V4H11V8H10V10H8V11H4V10H2V11H4V12H8V11H10V10H11V8H12V4H11V2Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4 2H8V3H9V4H10V8H9V9H8V10H4V9H3V8H2V4H3V3H4V2Z" fill="white"/>
+</svg>
+
diff --git a/webclient/view/98/ui/css/icon/radio-dot-disabled.svg b/webclient/view/98/ui/css/icon/radio-dot-disabled.svg
new file mode 100644
index 0000000..7d59f52
--- /dev/null
+++ b/webclient/view/98/ui/css/icon/radio-dot-disabled.svg
@@ -0,0 +1,3 @@
+<svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3 0H1V1H0V2V3H1V4H3V3H4V2V1H3V0Z" fill="#808080"/>
+</svg>
diff --git a/webclient/view/98/ui/css/icon/radio-dot.svg b/webclient/view/98/ui/css/icon/radio-dot.svg
new file mode 100644
index 0000000..61b884d
--- /dev/null
+++ b/webclient/view/98/ui/css/icon/radio-dot.svg
@@ -0,0 +1,3 @@
+<svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3 0H1V1H0V2V3H1V4H3V3H4V2V1H3V0Z" fill="black"/>
+</svg>
diff --git a/webclient/view/98/ui/css/icon/restore.svg b/webclient/view/98/ui/css/icon/restore.svg
new file mode 100644
index 0000000..9d17f27
--- /dev/null
+++ b/webclient/view/98/ui/css/icon/restore.svg
@@ -0,0 +1,10 @@
+<svg width="8" height="9" viewBox="0 0 8 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="2" width="6" height="2" fill="black"/>
+<rect x="7" y="2" width="1" height="4" fill="black"/>
+<rect x="2" y="2" width="1" height="1" fill="black"/>
+<rect x="6" y="5" width="1" height="1" fill="black"/>
+<rect y="3" width="6" height="2" fill="black"/>
+<rect x="5" y="5" width="1" height="4" fill="black"/>
+<rect y="5" width="1" height="4" fill="black"/>
+<rect x="1" y="8" width="4" height="1" fill="black"/>
+</svg>
diff --git a/webclient/view/98/ui/css/icon/scrollbar-background.svg b/webclient/view/98/ui/css/icon/scrollbar-background.svg
new file mode 100644
index 0000000..3770071
--- /dev/null
+++ b/webclient/view/98/ui/css/icon/scrollbar-background.svg
@@ -0,0 +1,4 @@
+<svg width="2" height="2" viewBox="0 0 2 2" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1 0H0V1H1V2H2V1H1V0Z" fill="#C0C0C0"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 0H1V1H0V2H1V1H2V0Z" fill="white"/>
+</svg>
diff --git a/webclient/view/98/ui/css/ms_sans_serif.woff b/webclient/view/98/ui/css/ms_sans_serif.woff
new file mode 100644
index 0000000..a8df7f1
Binary files /dev/null and b/webclient/view/98/ui/css/ms_sans_serif.woff differ
diff --git a/webclient/view/98/ui/css/ms_sans_serif.woff2 b/webclient/view/98/ui/css/ms_sans_serif.woff2
new file mode 100644
index 0000000..83ea806
Binary files /dev/null and b/webclient/view/98/ui/css/ms_sans_serif.woff2 differ
diff --git a/webclient/view/98/ui/css/ms_sans_serif_bold.woff b/webclient/view/98/ui/css/ms_sans_serif_bold.woff
new file mode 100644
index 0000000..44064b3
Binary files /dev/null and b/webclient/view/98/ui/css/ms_sans_serif_bold.woff differ
diff --git a/webclient/view/98/ui/css/ms_sans_serif_bold.woff2 b/webclient/view/98/ui/css/ms_sans_serif_bold.woff2
new file mode 100644
index 0000000..610c091
Binary files /dev/null and b/webclient/view/98/ui/css/ms_sans_serif_bold.woff2 differ
diff --git a/webclient/view/98/ui/css/style.css b/webclient/view/98/ui/css/style.css
new file mode 100644
index 0000000..fbd4a40
--- /dev/null
+++ b/webclient/view/98/ui/css/style.css
@@ -0,0 +1,50 @@
+body {
+    background: #c0c0c0;
+}
+
+.window {
+    font-family: Arial;
+}
+
+#navSearchWindow {
+    width: 400px;
+}
+
+.title-bar.danger {
+    background: linear-gradient(90deg,red,lightcoral);
+}
+.title-bar.warning {
+    background: linear-gradient(90deg,yellow,lightyellow);
+}
+.title-bar.warning .title-bar-text {
+    color: black;
+}
+.title-bar.success {
+    background: linear-gradient(90deg,green,lightgreen);
+}
+
+h1 {
+    font-size: 2rem;
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+}
+h2 {
+    font-size: 1.75rem;
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+}
+h3 {
+    font-size: 1.5rem;
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+}
+h4 {
+    font-size: 1.25rem;
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+}
+h5 {
+    font-size: 1rem;
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+}