show current camps on start page

src/main/resources/static/css/style.css

@@ -0,0 +1,100 @@
+html {
+	width: 100vw;
+	height: 100vh;
+}
+
+body {
+	background-image: linear-gradient(to bottom right, rgb(255, 190, 111), rgb(198, 70, 0));
+}
+
+.mainpage {
+	background-color: rgba(255, 255, 255, 0.4);
+	padding: 8px;
+	overflow: auto;
+	width: 100%;
+	height: calc(100vh - 60px); /* 60 px is the current height of the headline; TODO: calculate it */
+}
+
+.middlecenter {
+	margin: auto;
+	top: 40vh;
+	bottom: 40vh;
+	position: fixed;
+	left: 40vw;
+	right: 40vw;
+}
+
+.myheadline {
+	margin: 8px;
+}
+
+.bottomdist16 {
+	margin-bottom: 16px;
+}
+
+.topright {
+	position: fixed;
+	right: 8px;
+	top: 8px;
+}
+
+.tablelink {
+	cursor: pointer;
+	text-decoration: none;
+	color: black;
+}
+
+.tablelink:hover {
+	text-decoration: underline;
+	color: darkcyan;
+}
+
+.deletelink {
+	padding: 4px;
+	border: 1px solid rgba(0, 0, 0, 0.0);
+	border-radius: 4px;
+}
+
+.deletelink:hover {
+	color: red;
+	border: 1px solid red;
+	text-decoration-line: line-through;
+}
+
+.linkbtn {
+	background: transparent;
+	border: 2px solid transparent;
+	padding: 8px;
+}
+
+.linkbtn:hover {
+	background-color: white;
+	border: 2px solid silver;
+	border-radius: 4px;
+}
+
+.btn-icon-silent {
+	background: transparent;
+	border: 2px solid transparent;
+	padding: 8px;
+	color: silver;
+}
+
+.btn-icon-silent:hover {
+	background-color: white;
+	border: 2px solid silver;
+	border-radius: 4px;
+	color: darkcyan;
+}
+
+.mytoggle_collapsed {
+	display: none;
+}
+
+.mytoggle_btn {
+	cursor: pointer;
+}
+
+.mytoggle_btn:hover {
+	background-color: #abcdef;
+}

src/main/resources/static/js/mytoggle.js

@@ -0,0 +1,8 @@
+class MyToggle {
+	constructor() {
+	}
+
+	toggle(divid) {
+		$("[id='" + divid + "']").toggle();
+	}
+}