redesign of the landing page, see #20

added registration start time info

build.gradle

@@ -8,7 +8,7 @@ plugins {
 }
 
 group = 'de.jottyfan.camporganizer'
-version = '0.8.7'
+version = '0.9.4'
 
 description = """CampOrganizer2"""
 

src/main/java/de/jottyfan/camporganizer/module/admin/AdminRepository.java

@@ -435,10 +435,8 @@ public class AdminRepository {
 		jooq.transaction(t -> {
 			LocalDate arriveDate = bean.getArrive();
 			LocalDate departDate = bean.getDepart();
-			LocalDate startBookingDate = bean.getStartBooking();
 			LocalDateTime arrive = arriveDate == null ? null : arriveDate.atStartOfDay();
 			LocalDateTime depart = departDate == null ? null : departDate.atStartOfDay();
-			LocalDateTime startBooking = startBookingDate == null ? null : startBookingDate.atStartOfDay();
 			if (bean.getPk() == null) {
 				InsertValuesStep16<TCampRecord, LocalDateTime, String, LocalDateTime, Integer, Integer, Integer, Boolean, Integer, Integer, String, String, Integer, Integer, Integer, Integer, LocalDateTime> sql = DSL
 						.using(t)
@@ -462,7 +460,7 @@ public class AdminRepository {
 							        T_CAMP.START_BOOKING)
 					.values(arrive, bean.getCountries(), depart, bean.getFkDocument(), bean.getFkLocation(), bean.getFkProfile(),
 							bean.getLockSales() != null ? bean.getLockSales() : false, bean.getMaxAge(), bean.getMinAge(), bean.getName(), bean.getPrice(),
-						  bean.getBedsFemale(), bean.getBedsMale(), bean.getBlockedBedsFemale(), bean.getBlockedBedsMale(), startBooking);
+						  bean.getBedsFemale(), bean.getBedsMale(), bean.getBlockedBedsFemale(), bean.getBlockedBedsMale(), bean.getStartBooking());
 				// @formatter:on
 				LOGGER.trace(sql);
 				sql.execute();
@@ -485,7 +483,7 @@ public class AdminRepository {
 					.set(T_CAMP.BEDS_MALE, bean.getBedsMale())
 					.set(T_CAMP.BLOCKED_BEDS_FEMALE, bean.getBlockedBedsFemale())
 					.set(T_CAMP.BLOCKED_BEDS_MALE, bean.getBlockedBedsMale())
-					.set(T_CAMP.START_BOOKING, startBooking)
+					.set(T_CAMP.START_BOOKING, bean.getStartBooking())
 					.where(T_CAMP.PK.eq(bean.getPk()));
 				// @formatter:on
 				LOGGER.trace(sql);

src/main/java/de/jottyfan/camporganizer/module/admin/model/CampBean.java

@@ -58,8 +58,8 @@ public class CampBean implements Serializable {
 	@Min(value = 0)
 	private Integer blockedBedsMale;
 	@NotNull
-	@DateTimeFormat(pattern = "yyyy-MM-dd")
+	@DateTimeFormat(iso = DateTimeFormat.ISO.DATE_TIME)
-	private LocalDate startBooking;
+	private LocalDateTime startBooking;
 
 	/**
 	 * generate a camp bean out of r
@@ -74,7 +74,6 @@ public class CampBean implements Serializable {
 		CampBean bean = new CampBean();
 		LocalDateTime arrive = r.getArrive();
 		LocalDateTime depart = r.getDepart();
-		LocalDateTime startBooking = r.getStartBooking();
 		bean.setArrive(arrive == null ? null : arrive.toLocalDate());
 		bean.setCountries(r.getCountries());
 		bean.setDepart(depart == null ? null : depart.toLocalDate());
@@ -91,7 +90,7 @@ public class CampBean implements Serializable {
 		bean.setBedsMale(r.getBedsMale());
 		bean.setBlockedBedsFemale(r.getBlockedBedsFemale());
 		bean.setBlockedBedsMale(r.getBlockedBedsMale());
-		bean.setStartBooking(startBooking == null ? null : startBooking.toLocalDate());
+		bean.setStartBooking(r.getStartBooking());
 		return bean;
 	}
 
@@ -353,14 +352,14 @@ public class CampBean implements Serializable {
 	/**
 	 * @return the startBooking
 	 */
-	public LocalDate getStartBooking() {
+	public LocalDateTime getStartBooking() {
 		return startBooking;
 	}
 
 	/**
 	 * @param startBooking the startBooking to set
 	 */
-	public void setStartBooking(LocalDate startBooking) {
+	public void setStartBooking(LocalDateTime startBooking) {
 		this.startBooking = startBooking;
 	}
 }

src/main/java/de/jottyfan/camporganizer/module/staticpages/StaticPagesController.java

@@ -21,7 +21,7 @@ public class StaticPagesController extends CommonController {
 	 */
 	@GetMapping("/")
 	public String getIndex() {
-		return "/index";
+		return "/allgemeines";
 	}
 
 	/**
@@ -44,6 +44,16 @@ public class StaticPagesController extends CommonController {
 		return "/verein";
 	}
 
+	/**
+	 * load the vereinsmitglieder page
+	 *
+	 * @return the vereinsmitglieder page
+	 */
+	@GetMapping("/vereinsmitglieder")
+	public String getVereinsmitglieder() {
+		return "/vereinsmitglieder";
+	}
+
 	/**
 	 * load the kontakt page
 	 *

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

@@ -49,6 +49,48 @@ body {
 	background-repeat: no-repeat;
 }
 
+.logo {
+	width: 128px;
+	height: 55px;
+	background-size: 128px;
+	background-repeat: no-repeat;
+	background-image:  url('../images/logo.png');
+	margin-left: 8px;
+	display: inline-block;
+  position: relative;
+  overflow: hidden;
+}
+
+.logo::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-image: url('../images/logo_hover.png');
+  background-size: cover;
+  opacity: 0;
+  transition: opacity 0.5s ease-in-out;
+}
+
+.logo:hover::before {
+  opacity: 1;
+}
+
+.icon_profile {
+	width: 32px;
+	height: 32px;
+	background-size: 32px;
+	background-repeat: no-repeat;
+	background-image: url('../images/Icon_Profil.svg');
+	display: inline-block;
+}
+
+.icon_profile:hover {
+	background-image: url('../images/Icon_Profil_hover.svg');
+}
+
 a {
 	font-family: 'Fira Sans';
 }

src/main/resources/static/css/style_static.css

@@ -147,4 +147,14 @@ h4 {
 
 h5 {
 	font-size: 14px;
-}
+}
+
+ .preview-content {
+  min-height: 200px;
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+.accordion-collapse:not(.show) {
+  height: 200px !important;
+}

src/main/resources/static/images/Icon_Profil_hover.svg

@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Ebene_2" data-name="Ebene 2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 71.44 71.44">
+  <defs>
+    <style>
+      .cls-1 {
+        stroke-linecap: round;
+        stroke-linejoin: round;
+        stroke-width: .5px;
+      }
+
+      .cls-1, .cls-2 {
+        stroke: #008b8b;
+      }
+
+      .cls-1, .cls-2, .cls-3 {
+        fill: none;
+      }
+
+      .cls-4 {
+        clip-path: url(#clippath);
+      }
+
+      .cls-2 {
+        stroke-miterlimit: 10;
+      }
+    </style>
+    <clipPath id="clippath">
+      <circle class="cls-3" cx="35.72" cy="35.72" r="35.22"/>
+    </clipPath>
+  </defs>
+  <g id="Ebene_1-2" data-name="Ebene 1">
+    <circle class="cls-2" cx="35.72" cy="35.72" r="35.22"/>
+    <g class="cls-4">
+      <g>
+        <path class="cls-1" d="m26.52,40.74c.1.18,2.36-1.36,2.36-1.36.7,1.22-8.38,7.81-7.67,9.05,1.64,2.84,16.71-10.45,17.06-9.85,0,0-19.7,11.6-17.8,14.89,1.1,1.91,23.09-13.33,23.09-13.33.64,1.11-24.96,17.34-24.23,18.61l27.74-16.02c1.97,3.41-28.1,17.71-26.74,20.06,1.11,1.92,28.55-18.65,29.48-17.02l-29.78,21.81,31.45-18.16c1.78,3.08-31.55,21.22-30.85,22.43.13.22,31.02-17.91,31.02-17.91,2.48,4.3-28.57,20.86-28.46,21.05l27.99-16.16c1.06,1.84-18.76,15.45-18.76,15.45.49.85,18.85-10.88,18.85-10.88l-10.45,10.65s9.95-7.97,10.91-6.3c.39.68-4.82,5.99-4.21,7.05.28.48,3.6-2.08,3.6-2.08"/>
+        <path class="cls-1" d="m27.35,10.64c.22.37,2.8-2.3,3.09-1.79l-9.63,10.18c.69,1.2,18.44-11.86,18.96-10.95,0,0-19,13.93-18.28,15.17.99,1.71,20.42-16.02,22.25-12.85,1.25,2.16-24.58,13.41-22.24,17.46,2.06,3.57,26.29-15.18,26.29-15.18,2.08,3.6-27.69,14.43-25.02,19.06l25.92-14.96s-23.11,17.33-22.84,17.8c2.55,4.41,24.69-14.25,24.69-14.25,0,0-19.83,14.92-19.34,15.78.46.79,18.25-14.34,19.9-11.49,0,0-15.86,10.69-14.52,13l11.54-6.66"/>
+        <path class="cls-2" d="m35.72,37.67h0c8.62,0,15.61,6.99,15.61,15.61v21.27h-31.22v-21.27c0-8.62,6.99-15.61,15.61-15.61Z"/>
+        <circle class="cls-2" cx="35.72" cy="22.8" r="14.87"/>
+      </g>
+    </g>
+  </g>
+</svg>

src/main/resources/templates/admin/camp_edit.html

@@ -120,7 +120,8 @@
 							</div>
 							<label for="startBooking" class="col-sm-2 col-form-label mb-2">Buchungsbeginn</label>
 							<div class="col-sm-4 mb-2">
-								<span class="error" th:each="error : ${#fields.errors('startBooking')}">[[${error}]]<br /></span> <input id="startBooking" type="date" th:field="*{startBooking}"
+								<span class="error" th:each="error : ${#fields.errors('startBooking')}">[[${error}]]<br /></span>
+								<input id="startBooking" type="datetime-local" th:field="*{startBooking}"
 									th:class="${'form-control ' + (#fields.hasErrors('startBooking') ? 'inputerror' : '')}" />
 							</div>
 							<label for="inputBedsFemale" class="col-sm-2 col-form-label mb-2">Anzahl Betten für Mädchen</label>

src/main/resources/templates/allgemeines.html

@@ -9,28 +9,50 @@
 		<div class="container">
 			<div class="row">
 				<div class="col">
-					<div class="blocktext">
+					<h2 class="headlinefont center">Willkommen bei den</h2>
-					  <h1 class="titlefont">Statt Langeweile zu Hause – Action auf einer Freizeit!</h1>
+					<h1 class="titlefont center">MITTELPUNKT-FREIZEITEN</h1>
-					  <p>
+			  </div>
-					    Ferien sind cool! Das steht auf jeden Fall fest. Doch wenn die Freunde alle im Urlaub sind und du alleine zu Hause bleibst,
+			</div>
-					    kommt schnell Langeweile auf. <strong>Warum also nicht einfach die Ferien mit vielen anderen Gleichaltrigen
+			  <div class="accordion-item">
-					      verbringen und jede Menge Spaß erleben?</strong> Genau dafür stehen <strong>Onkel Werner Freizeiten!</strong>
+			  	<div class="accordion-header d-flex justify-content-between align-items-start">
-					  </p>
+			  	  <h1 class="accordion-button collapsed titlefont" type="button" data-bs-toggle="collapse" data-bs-target="#collapseText">
-					  <h2 class="headlinefont">Das sind Onkel Werner Freizeiten</h2>
+              Was sind für Freizeiten sind das?
-					  <p>
+            </h1>
-					    <strong>Onkel Werner Freizeiten sind immer ein Erlebnis der besonderen Art.</strong> Je nach Freizeit verbringst du entweder
+            <a class="btn btn-lg btn-outline-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseText">
-					    ein verlängertes Wochenende, eine Woche oder sogar zwei Wochen zusammen mit einer Hand voll Mitarbeitern und jeder Menge
+              <i class="fas fa-angle-down"></i>
-					    Kindern oder Teenies.
+            </a>
-					  </p>
+			  	</div>
-					  <p>Im Freizeitheim angekommen, wirst du erst einmal ordentlich begrüßt und beziehst zusammen mit deinen (neuen) Freunden
+			  	<div id="collapseText" class="accordion-collapse collapse">
-					    dein Zimmer. Und dann kann die Freizeit auch schon starten. Hier erlebst du jede Menge Spaß, knüpfst neue Freundschaften,
+					  <div class="accordion-body preview-content">
-					    bekommst ein tolles Programm geboten, hörst spannende Geschichten aus der Bibel und noch viel mehr.</p>
+					  	<div class="blocktext">
-					  <p>
+							  <h2 class="headlinefont">Keine Langeweile - Ferienaction!</h2>
-					    <strong>Preise, Termine und weitere Infos findest du in unserem Buchungsportal.</strong>
+							  <p>
-					  </p>
+							    Statt Langeweile zu Hause erwarten dich spannende Tage mit neuen Freunden, Spaß und aufregenden Erlebnissen. Nutze deine Ferien, um nicht nur Abenteuer zu erleben,
-					  <p>
+							    sondern auch wertvolle Zeit mit anderen zu verbringen.
-					    <a th:href="@{/camplist}">Jetzt Freizeiten entdecken</a>
+							  </p>
-					  </p>
+							  <h2 class="headlinefont">So starten wir...</h2>
+							  <p>
+							    Im Freizeitheim angekommen, wirst du erst einmal ordentlich von motivierten Mitarbeitern und jeder Menge Kindern oder Teenies in deinem ALter begrüßt. Danach beziehst
+							    du zusammen mit deinen (neuen) Freunden dein Zimmer. Und dann kann die Freizeit auch schon starten.
+							  </p>
+							  <h2 class="headlinefont">Das machen wir...</h2>
+							  <p>
+							    Hier erlebst du jede Menge Spaß bei gemeinsamen Spielen und Aktivitäten, knüpfst neue Freundschaften, bekommst ein tolles Tagesprogramm geboten, hörst spannende
+							    Geschichten aus der Bibel und noch einiges mehr. Schau dir mal unten die einzelnen Freizeiten an, zu jeder gibt es eine kleine Beschreibung, was dich erwartet.
+							    Du kannst auch bei den Berichten lesen, wie vergangene Freizeiten waren.
+							  </p>
+							  <p>
+							    <a th:href="@{/camplist}">Jetzt Freizeiten entdecken</a>
+							  </p>
+						  </div>
+						</div>
+				  </div>
+        </div>
+
+				<hr />
+        <h1>TODO: umziehen nach Anmeldung</h1>
+        <div class="row">
+					<div class="col">
 					  <h2 class="headlinefont">Kinderfreizeiten in Olfen</h2>
 					  <p>Jede Menge Kinder in deinem Alter, viele coole Spiele, Sommerrodeln und spannende biblische Geschichten…</p>
 					  <p>…das und noch viel mehr erwartet dich auf den Kinderfreizeiten in Olfen in den Oster- und Herbstferien. Olfen ist ein
@@ -143,7 +165,6 @@
 					</div>
 				</div>
 			</div>
-		</div>
 	</th:block>
 </body>
 </html>

src/main/resources/templates/fragments/camplist.html

@@ -47,7 +47,7 @@
 							</div>
 							<div class="row g-5" th:unless="${c.bookingHasStarted}">
 								<div class="col-12 alert alert-info" role="alert">
-								  Die Anmeldung wird erst am <span th:text="${#temporals.format(c.startBooking, 'dd.MM.yyyy')}"></span> freigeschaltet.
+								  Die Anmeldung wird erst am <span th:text="${#temporals.format(c.startBooking, 'dd.MM.yyyy, HH:mm')}"></span> Uhr, freigeschaltet.
 								</div>
 							</div>
 						</div>

src/main/resources/templates/nachruf.html

@@ -17,23 +17,6 @@
 					<p>Einen Tag vor seinem Tod sagte er dazu: „Ich will mir dafür nicht auf die Schulter klopfen. Es ist Gottes Werk.“</p>
 					<p>Wir dürfen dankbar sein, für das, was er durch Gottes Gnade aufgebaut hat und bitten euch herzlich um Gebet, um diese große Arbeit der Freizeiten so weiterzuführen, wie es dem Herrn gefällt und wie es sich auch Onkel Werner gewünscht hat. Er sagte, dass er sich wünscht und dafür betet, dass wir noch doppelt so viel Segen erleben dürften, ähnlich wie Elisa, der sich das doppelte des Geistes Elias erbat.</p>
 					<p>Onkel Werner wird uns fehlen, aber wir freuen uns, dass er nach einem erfüllten Leben sein Ziel erreichen durfte!</p>
-				<!--
-					<img class="img-fluid rounded" th:src="@{/images/start-banner-2019.jpg}" alt=""><br />
-					<br />
-					<div class="blocktext">
-					  <h1 style="text-align: left">Ferien, die in Erinnerung bleiben – persönlich, echt, erlebnisreich</h1>
-					  <p style="text-align: left">Du willst nicht einfach deine Zeit totschlagen, sondern Ferien erleben, die dein Leben prägen,
-					    sinnvoll sind und dazu Spaß machen? Dann bist du hier genau richtig! Bei den Freizeiten geht es um Freundschaften, Spaß und
-					    vor allem Gottes Wort. Genau dafür stehen Onkel Werner Freizeiten!</p>
-					  <p></p>
-					  <h2 style="text-align: left">Unsere Freizeiten</h2>
-					  <h4 style="text-align: left">Erfahre hier, welche Freizeiten wir anbieten und was da so abgeht.</h4>
-					  <p style="text-align: left">Preise, Termine und weitere Infos findest du in unserem Buchungsportal.</p>
-					  <p style="text-align: left">
-					    <a th:href="@{/camplist}">Jetzt Freizeiten entdecken</a>
-					  </p>
-					</div>
-					-->
 				</div>
 			</div>
 		</div>

src/main/resources/templates/template.html

@@ -8,8 +8,8 @@
 <link th:rel="stylesheet" type="text/css" media="all" th:href="@{/webjars/font-awesome/6.5.2/css/all.min.css} " />
 <link th:rel="stylesheet" type="text/css" media="all" th:href="@{/webjars/datatables/1.13.5/css/jquery.dataTables.min.css}" />
 <link th:rel="stylesheet" type="text/css" media="all" th:href="@{/webjars/select2/4.0.13/css/select2.min.css}" />
-<link th:rel="stylesheet" type="text/css" media="all" th:href="@{/css/style.css}" />
 <link th:rel="stylesheet" type="text/css" media="all" th:href="@{/css/select2-bootstrap-5-theme.min.css}" />
+<link th:rel="stylesheet" type="text/css" media="all" th:href="@{/css/style.css}" />
 <script th:src="@{/webjars/jquery/3.7.1/jquery.min.js}"></script>
 <script th:src="@{/webjars/bootstrap/5.3.3/js/bootstrap.bundle.min.js}"></script>
 <script th:src="@{/webjars/datatables/1.13.5/js/jquery.dataTables.min.js}"></script>
@@ -21,7 +21,7 @@
 </head>
 <body>
 	<nav class="navbar sticky-top navbar-expand-lg navbar-light bg-light headerlayout navbar-background">
-		<span class="navbar-brand"><img th:src="@{/images/logo.png}" width="128px" style="margin-left: 8px" /></span>
+		<span class="navbar-brand"><a th:href="@{/allgemeines}"><span class="logo"></span></a></span>
 		<button class="navbar-toggler" style="margin-right: 40px" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
 			aria-expanded="false">
 			<span class="navbar-toggler-icon"></span>
@@ -29,13 +29,8 @@
 		<div class="collapse navbar-collapse" id="navbarSupportedContent" style="margin-right: 20px">
 			<ul class="navbar-nav mb-2 mb-lg-0">
 				<li class="nav-item"><a th:href="@{/ical}" class="btn btn-secondary btn-icon-silent" target="_blank" title="Freizeitdaten als ical herunterladen"><i class="far fa-calendar-alt"></i></a></li>
-				<li class="nav-item"><a class="btn btn-icon-silent menufont" th:href="@{/}">Startseite</a></li>
+				<li class="nav-item"><a class="btn btn-icon-silent menufont" th:href="@{/camplist}">Anmeldung</a></li>
-				<li class="nav-item"><a class="btn btn-icon-silent menufont" th:href="@{/nachruf}">Nachruf</a></li>
+				<li class="nav-item dropdown"><a class="nav-link dropdown-toggle btn-icon-silent menufont" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">Berichte</a>
-				<li class="nav-item"><a class="btn btn-icon-silent menufont" th:href="@{/allgemeines}">Allgemeines</a></li>
-				<li class="nav-item"><a class="btn btn-icon-silent menufont" th:href="@{/camplist}">Freizeiten</a></li>
-				<li class="nav-item"><a class="btn btn-icon-silent menufont" th:href="@{/verein}">Verein</a></li>
-				<li class="nav-item dropdown"><a class="nav-link dropdown-toggle btn-icon-silent menufont" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-						Tagebuch </a>
 					<ul class="dropdown-menu visibledropdown" aria-labelledby="navbarDropdown">
 						<li><a class="dropdown-item menufont" th:href="@{/reports/olfenostern2023}">Osterfreizeit 2023 in Olfen</a></li>
 						<li><hr class="dropdown-divider"></li>
@@ -65,7 +60,15 @@
 						<li><a class="dropdown-item menufont" th:href="@{/reports/schweiz2014}">Schweiz 2014</a></li>
 						<li><hr class="dropdown-divider"></li>
 						<li><a class="dropdown-item menufont" th:href="@{/reports/history}">Über 30 Jahre Onkel Werner Freizeiten – Ein Rückblick ...</a></li>
-					</ul></li>
+					</ul>
+				</li>
+				<li class="nav-item dropdown"><a class="nav-link dropdown-toggle btn-icon-silent menufont" href="#" id="navbarDropdownClub" role="button" data-bs-toggle="dropdown" aria-expannded="false">Verein</a>
+				  <ul class="dropdown-menu visibledropdown" aria-labelledby="navbarDropdownClub">
+    				<li><a class="dropdown-item menufont" th:href="@{/nachruf}">Onkel Werner</a></li>
+  				  <li><a class="dropdown-item menufont" th:href="@{/verein}">Vereinsbeschreibung</a></li>
+  				  <li><a class="dropdown-item menufont" th:href="@{/vereinsmitglieder}">Vereinsmitglieder</a></li>
+				  </ul>
+				</li>
 				<li class="nav-item"><a class="btn btn-icon-silent menufont" th:href="@{/kontakt}">Kontakt</a></li>
 			</ul>
 			<ul class="navbar-nav mb-2 mb-lg-0" sec:authorize="hasRole('business')">
@@ -127,7 +130,7 @@
 				<li class="nav-item">
 					<div class="dropdown">
 						<button class="btn btn-hoverborder navbar-collapse" type="button" data-bs-toggle="dropdown" aria-expanded="false">
-							<img th:src="@{/images/Icon_Profil.svg}" width="24px" height="24px" />
+							<span class="icon_profile"></span>
 						</button>
 						<ul class="dropdown-menu dropdown-menu-end" th:if="${#strings.isEmpty(currentUser)}">
 							<li><a class="dropdown-item" th:href="@{/dashboard}">einloggen</a></li>

src/main/resources/templates/verein.html

@@ -31,50 +31,7 @@
 					<h3 class="headlinefont">Der Verein</h3>
 					<p>Und unser Verein? Der ist eben aus genau diesen Kindern und Jugendlichen entstanden, die selbst Onkel Werners Freizeiten besucht haben und später dort Mitarbeiter geworden sind.
 						Wir möchten, dass seine Arbeit weitergeführt wird. Aber vor allem wollen wir, dass noch viele Kinder und Jugendliche den Herrn Jesus kennen lernen können und mit ihm leben wollen.</p>
-					<p>
+					<p></p>
-					<h3 class="headlinefont">Die Vereinsmitglieder</h3>
-					<p>In unserem Verein arbeiten verschiedene Freizeitbegeisterte mit, von denen sich hier ein paar vorstellen:</p>
-				</div>
-				<div class="col-sm-12 col-md-6">
-					<img th:src="@{/images/simeon.velleuer.jpg}" align="left" class="rounded" style="margin-right: 8px" /> Simeon Velleuer, 41 Jahre, verheiratet mit Anja und Vater von zwei wunderbaren
-					Kindern, Sophie und Kaleb. Für alle „Süddeutschen“ – meine Heimat liegt „im Norden“ – in Mettmann.<br /> <br /> Ich darf mittlerweile auf eine über zwanzigjährige Zeit in der Mitarbeit
-					mit Kids und Teens zurückblicken und bin unserem gnädigen Gott und Vater dafür sehr dankbar. Er hat mich errettet und aus der Finsternis in sein wunderbares Licht berufen (1.Petr. 2,9).
-					Diese Botschaft möchte ich gerne weitergeben - auf Freizeiten durch die froh machende Botschaft der Bibel und durch das ganz praktische und tägliche Leben.<br /> <br /> Ich erhoffe mir
-					von den Freizeiten, dass wir auf ein Leben mit Gott aufmerksam machen können. Das ist spannend und herausfordernd zugleich. Durch zahlreiche Erfahrungen in meinem Leben habe ich
-					feststellen können, dass Gott immer den richtigen Plan für jeden ganz persönlich längst fertig hat. Wir dürfen uns ihm ganz anvertrauen.<br /> <br /> (Es ist schon ein paar Jahre her,
-					als ich selber noch Teilnehmer auf der wunderschönen Griesalp war. Heutzutage fahren wir ins Kiental. Großartig gelegen inmitten der faszinierenden Bergwelt des Schweizer Berner
-					Oberlandes. Die Kombination aus Wanderungen und Andachten ist genau das Richtige für mich...und mit Sicherheit auch für dich.)<br />
-					<hr />
-				</div>
-				<div class="col-sm-12 col-md-6">
-					<img th:src="@{/images/joerg.henke.jpg}" align="left" class="rounded" style="margin-right: 8px" /> Jörg Henke, Vater von zwei atemberaubenden Töchtern. Aus Dresden unterstütze ich die
-					Freizeitarbeit v.a. im Bereich der Homepage und den Abrechnungen. Wenn ich es mal wieder schaffe, auch an einer Freizeit teilzunehmen, spiele ich gerne Gitarre und singe viele Lieder mit
-					den Teilnehmern.<br /> <br /> Als einer von Onkel Werners "Erben" darf ich mich an meine Bekehrung erinnern, die ich am 31.10.1993 erlebt habe. Details dazu gibt es auch hier: <a
-						href="https://www.jottyfan.de/bekehrung/" target="_blank">https://www.jottyfan.de/bekehrung/</a>.<br /> <br /> Gerade deswegen ist es mir wichtig, dass unsere Freizeiten stattfinden,
-					offen für finanziell schwächere Familien sind und wir durch die uns anvertrauten Spenden unterstützen können. Jedes Kind / jeder Teenie soll die rettende Botschaft vom Kreuz hören: dass
-					Jesus Christus gerade für dich gestorben und auferstanden ist, um dich von deinen Sünden zu befreien und dir damit ewiges Leben in der Gemeinschaft mit Gott schenkt. Sehr wertvoll finde
-					ich daher auch die Abendandachten, die es ermöglichen, genau diese Wahrheit zu verdeutlichen.<br />
-					<hr />
-				</div>
-				<div class="col-sm-12 col-md-6">
-					<img th:src="@{/images/anna.weiser.png}" align="left" class="rounded" style="margin-right: 8px" /> Mein Name ist Anna Weiser, ich bin Ehefrau und Mutter und arbeite seit ich 18 Jahre alt
-					bin auf den Freizeiten mit. Schnell habe ich gemerkt, dass der Herr mir das Anliegen für die Freizeitarbeit stärker aufs Herz legt und so habe ich mit der Zeit mehr Verantwortung übernehmen
-					und in den Verein eintreten dürfen.<br /><br />Mir liegt es stark am Herzen, Kindern, Jugendlichen und jungen Erwachsenen vom Evangelium zu erzählen, ihnen das Gottes Wort groß zu machen,
-					sie in der Nachfolge von Jesus Christus zu fördern und ihnen auch über die Freizeiten hinaus in ihrem Glaubensleben und ihrer Charakterentwicklung zu helfen.<br /><br />
-          Seit 2020 darf ich mit einem Minijob im Verein angestellt sein und übernehme neben der Freizeitarbeit (Schwerpunkt Teenie- und Jugendfreizeiten) vor allem Aufgaben im organisatorischen
-          Bereich und in der Nacharbeit mit Mädels und jungen Frauen.
-					<br />
-					<hr />
-				</div>
-				<div class="col-sm-12 col-md-6">
-					<img th:src="@{/images/linda.lang.png}" align="left" class="rounded" style="margin-right: 8px" /> Ich bin Linda und 22 Jahre alt. In meiner Freizeit fahre ich Inliner, reise und habe gerne
-					eine Kamera in der Hand. Schon als Kind durfte ich die Onkel Werner Freizeiten (vor allem die Heimfreizeiten) besuchen und auch da immer mehr über Gottes Wort lernen und nach meiner Bekehrung
-					weiter erkennen. Nachdem die Teilnehmer-Zeit vorbei war, durfte ich auch als Mitarbeiter auf Freizeiten unterstützen, bin aber im Verein hauptsächlich im Bereich der Website und Design tätig.<br /><br />
-					Das Besondere an den Onkel Werner Freizeiten ist, dass Kinder und Jugendliche nicht nur gemeinsam Spiel und Spaß haben, sondern auch hören und sehen, wie das Wort Gottes im Alltag angewandt
-					und erlebt werden kann. Der Mittelpunkt der Freizeiten ist Jesus Christus, der jedes einzelne Kind liebt und zu sich ruft, egal aus welchen Umständen es kommt. Wir möchten diese Gelegenheit
-					deshalb nutzen und sein Evangelium in den Freizeiten weitergeben.
-					<br />
-					<hr />
 				</div>
 			</div>
 		</div>

src/main/resources/templates/vereinsmitglieder.html

@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html xmlns:th="http://www.thymeleaf.org" layout:decorate="~{template}" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
+<head>
+<title>Camp Organizer 2 - Vereinsmitglieder</title>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+</head>
+<body>
+	<th:block layout:fragment="content">
+		<div class="container">
+			<div class="row">
+				<div class="col-12">
+					<h3 class="headlinefont">Die Vereinsmitglieder</h3>
+					<p>In unserem Verein arbeiten verschiedene Freizeitbegeisterte mit, von denen sich hier ein paar vorstellen:</p>
+				</div>
+				<div class="col-sm-12 col-md-6">
+					<img th:src="@{/images/simeon.velleuer.jpg}" align="left" class="rounded" style="margin-right: 8px" /> Simeon Velleuer, 41 Jahre, verheiratet mit Anja und Vater von zwei wunderbaren
+					Kindern, Sophie und Kaleb. Für alle „Süddeutschen“ – meine Heimat liegt „im Norden“ – in Mettmann.<br /> <br /> Ich darf mittlerweile auf eine über zwanzigjährige Zeit in der Mitarbeit
+					mit Kids und Teens zurückblicken und bin unserem gnädigen Gott und Vater dafür sehr dankbar. Er hat mich errettet und aus der Finsternis in sein wunderbares Licht berufen (1.Petr. 2,9).
+					Diese Botschaft möchte ich gerne weitergeben - auf Freizeiten durch die froh machende Botschaft der Bibel und durch das ganz praktische und tägliche Leben.<br /> <br /> Ich erhoffe mir
+					von den Freizeiten, dass wir auf ein Leben mit Gott aufmerksam machen können. Das ist spannend und herausfordernd zugleich. Durch zahlreiche Erfahrungen in meinem Leben habe ich
+					feststellen können, dass Gott immer den richtigen Plan für jeden ganz persönlich längst fertig hat. Wir dürfen uns ihm ganz anvertrauen.<br /> <br /> (Es ist schon ein paar Jahre her,
+					als ich selber noch Teilnehmer auf der wunderschönen Griesalp war. Heutzutage fahren wir ins Kiental. Großartig gelegen inmitten der faszinierenden Bergwelt des Schweizer Berner
+					Oberlandes. Die Kombination aus Wanderungen und Andachten ist genau das Richtige für mich...und mit Sicherheit auch für dich.)<br />
+					<hr />
+				</div>
+				<div class="col-sm-12 col-md-6">
+					<img th:src="@{/images/joerg.henke.jpg}" align="left" class="rounded" style="margin-right: 8px" /> Jörg Henke, Vater von zwei atemberaubenden Töchtern. Aus Dresden unterstütze ich die
+					Freizeitarbeit v.a. im Bereich der Homepage und den Abrechnungen. Wenn ich es mal wieder schaffe, auch an einer Freizeit teilzunehmen, spiele ich gerne Gitarre und singe viele Lieder mit
+					den Teilnehmern.<br /> <br /> Als einer von Onkel Werners "Erben" darf ich mich an meine Bekehrung erinnern, die ich am 31.10.1993 erlebt habe. Details dazu gibt es auch hier: <a
+						href="https://www.jottyfan.de/bekehrung/" target="_blank">https://www.jottyfan.de/bekehrung/</a>.<br /> <br /> Gerade deswegen ist es mir wichtig, dass unsere Freizeiten stattfinden,
+					offen für finanziell schwächere Familien sind und wir durch die uns anvertrauten Spenden unterstützen können. Jedes Kind / jeder Teenie soll die rettende Botschaft vom Kreuz hören: dass
+					Jesus Christus gerade für dich gestorben und auferstanden ist, um dich von deinen Sünden zu befreien und dir damit ewiges Leben in der Gemeinschaft mit Gott schenkt. Sehr wertvoll finde
+					ich daher auch die Abendandachten, die es ermöglichen, genau diese Wahrheit zu verdeutlichen.<br />
+					<hr />
+				</div>
+				<div class="col-sm-12 col-md-6">
+					<img th:src="@{/images/anna.weiser.png}" align="left" class="rounded" style="margin-right: 8px" /> Mein Name ist Anna Weiser, ich bin Ehefrau und Mutter und arbeite seit ich 18 Jahre alt
+					bin auf den Freizeiten mit. Schnell habe ich gemerkt, dass der Herr mir das Anliegen für die Freizeitarbeit stärker aufs Herz legt und so habe ich mit der Zeit mehr Verantwortung übernehmen
+					und in den Verein eintreten dürfen.<br /><br />Mir liegt es stark am Herzen, Kindern, Jugendlichen und jungen Erwachsenen vom Evangelium zu erzählen, ihnen das Gottes Wort groß zu machen,
+					sie in der Nachfolge von Jesus Christus zu fördern und ihnen auch über die Freizeiten hinaus in ihrem Glaubensleben und ihrer Charakterentwicklung zu helfen.<br /><br />
+          Seit 2020 darf ich mit einem Minijob im Verein angestellt sein und übernehme neben der Freizeitarbeit (Schwerpunkt Teenie- und Jugendfreizeiten) vor allem Aufgaben im organisatorischen
+          Bereich und in der Nacharbeit mit Mädels und jungen Frauen.
+					<br />
+					<hr />
+				</div>
+				<div class="col-sm-12 col-md-6">
+					<img th:src="@{/images/lars.dell.png}" align="left" class="rounded" style="margin-right: 8px" /> Würdest du lieber die Victoriafälle besuchen oder die Sahara Wüste?<br />
+          Hallöchen, ich bin Lars; auch wenn du mit der Frage am Anfang nichts verbinden kannst, lies ruhig weiter. Man hat mich kürzlich gefragt, warum ich denn eigentlich Mitarbeiter sein möchte,
+          „was motiviert dich denn?“ fragt man da. Nun, um ehrlich zu sein: Oft scheinbar sehr wenig. Sehr oft einfach der Drang, das tun zu müssen, was man schon immer getan hat.
+          Manche vermuten ja, dass der Strohhut auf Freizeitfotos einem immer wiederkehrenden Landstreicher zuzuschreiben ist, tatsächlich ist es aber meiner. Warum aber komme ich
+          immer wieder? Nun, manchmal weiß ich es nicht anders zu beschreiben als ein Drängen, ein Pflichtgefühl, das mich zieht, eine Last, die man einfach nicht loskriegt, wenn man
+          stehenbleibt. Ich kann mich daran erinnern, dass es früher nicht so war: Als Mitarbeiter mit Ende 15 sah die Welt anders aus: Man hat sich auf die Gemeinschaft, den Spaß, die
+          Spiele, allgemein die Mega Gaudi auf den Freizeiten gefreut. Da waren die Freunde, die Leute, die man gern hat, vielleicht gerade deshalb, weil man sie nur ein paar Mal im
+          Jahr sieht. Aber wenn die ersten Weggefährten und Freunde nicht mehr kommen, stellt sich die Frage: Warum kommst du?<br />
+          Ich habe vorhin den Drang beschreiben, kommen zu müssen. Es ist eine Last, die in der Vorbereitung auf die Freizeiten immer leichter wird und auf den Freizeiten irgendwann
+          ganz verschwindet. Ich glaube, dass es daran liegt, dass man merkt, dass Gott wirken möchte. Man sieht, dass Er durch die gute Botschaft von Jesus Christus Leben verändert
+          und durch Sein Wort die dicksten, stursten und selbstmitleidigsten Kinder, Teens, Jugendlichen und Erwachsenen knackt. Das ist wie der freie, ungetrübte Blick auf einen
+          gewaltigen Wasserfall. Ich erlebe Freizeiten als solche Wasserfälle der Gnade Gottes, wo Er wirkt und wir staunend zusehen, was Er Gewaltiges tut. Und da kann ich ein
+          Werkzeug sein. Die Frage, die sich mir dann stellt, ist nicht mehr: Warum komme ich eigentlich? Sondern: Wo wirkt die gewaltige Gnade Gottes?<br />
+          Und so drängt es mich immer wieder in die Ferne: Hohenhaslach, Schweiz, Olfen – egal wo, egal wer, egal wie viele - Hauptsache, es gibt dort Wasserfälle zu besichtigen.
+					<br />
+					<hr />
+				</div>
+			</div>
+			<div>
+			  <h3 class="headlinefont">Ehemalige Vereinsmitglieder</h3>
+				<p>Leider verlassen unseren Verein auch ab und zu Mitarbeiter, bei denen sich die Lebensumstände verändert haben. Wie sie sich einst vorgestellt haben, kann hier nachgelesen werden:</p>
+		  </div>
+		  <div class="col-sm-12 col-md-6">
+				<img th:src="@{/images/linda.lang.png}" align="left" class="rounded" style="margin-right: 8px" /> Ich bin Linda und 22 Jahre alt. In meiner Freizeit fahre ich Inliner, reise und habe gerne
+				eine Kamera in der Hand. Schon als Kind durfte ich die Onkel Werner Freizeiten (vor allem die Heimfreizeiten) besuchen und auch da immer mehr über Gottes Wort lernen und nach meiner Bekehrung
+				weiter erkennen. Nachdem die Teilnehmer-Zeit vorbei war, durfte ich auch als Mitarbeiter auf Freizeiten unterstützen, bin aber im Verein hauptsächlich im Bereich der Website und Design tätig.<br /><br />
+				Das Besondere an den Onkel Werner Freizeiten ist, dass Kinder und Jugendliche nicht nur gemeinsam Spiel und Spaß haben, sondern auch hören und sehen, wie das Wort Gottes im Alltag angewandt
+				und erlebt werden kann. Der Mittelpunkt der Freizeiten ist Jesus Christus, der jedes einzelne Kind liebt und zu sich ruft, egal aus welchen Umständen es kommt. Wir möchten diese Gelegenheit
+				deshalb nutzen und sein Evangelium in den Freizeiten weitergeben.
+				<br />
+				<hr />
+			</div>
+		</div>
+	</th:block>
+</body>
+</html>