Onkel-Werner-Freizeiten/CampOrganizer2
1
1
Fork 0
Code Issues 7 Pull Requests Packages Projects Releases Wiki Activity

more welcome page gimmicks

Browse Source
This commit is contained in:
Jottyfan
2025-05-13 23:06:17 +02:00
parent bdfe54a148
commit d3389e4813
3 changed files with 42 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/main/resources/templates/allgemeines.html
View File

@ -7,7 +7,7 @@
<body>
<th:block layout:fragment="content">
<div class="container">
<div id="welcomeblock" class="row">
<div id="welcomeblock" class="row displayblock">
<div class="col-12">
<h2 class="headlinefont center">Willkommen bei den</h2>
<h1 class="titlefont center">Mittelpunkt<br />Freizeiten</h1>
@ -16,23 +16,49 @@
<a th:href="@{/camplist}" class="btn btn-outline-danger">zur Anmeldung</a>
</div>
<div class="col-12 center mt-3">
<a href="#" onclick="$('#infoblock').show();$('#welcomeblock').hide()" class="hoverlink"><i class="fas fa-arrow-down"></i>&nbsp;weitere Infos</a>
<a href="#" onclick="$('#welcomeblock').slideUp('slow'); $('#fotoblock').fadeIn(1000);" class="btn btn-outline-secondary"><i class="fas fa-arrow-down"></i>&nbsp;weitere Informationen</a>
</div>
</div>
<div id="infoblock" class="row" style="display: none">
<div class="col-12 center">
<a href="#" onclick="$('#infoblock').hide();$('#welcomeblock').show()" class="btn btn-outline-secondary"><i class="fas fa-arrow-up"></i></a>
<div id="fotoblock" class="row displayblock" style="display: none">
<div class="col-12 center mb-3">
<a href="#" onclick="$('#fotoblock').fadeOut(1000); $('#welcomeblock').slideDown('slow');" class="btn btn-outline-secondary"><i class="fas fa-arrow-up"></i>&nbsp;Startseite</a>
</div>
<div class="col-12">
<th:block th:each="i : ${#numbers.sequence(1, 7)}">
<a th:href="'https://www.onkelwernerfreizeiten.de/stock/stock' + ${i} + '.jpg'" data-fancybox="gallery" th:data-caption="'Bild ' + ${i}">
<img th:src="'https://www.onkelwernerfreizeiten.de/stock/stock' + ${i} + '.jpg'" height="96px" class="m-1" />
</a>
</th:block>
<script th:inline="javascript">
Fancybox.bind('[data-fancybox="gallery"]', {
});
</script>
</div>
<div class="col-12 center mt-3">
<a href="#" onclick="$('#fotoblock').slideUp('slow'); $('#infoblock').fadeIn(1000);" class="btn btn-outline-secondary"><i class="fas fa-arrow-down"></i>&nbsp;weitere Infos</a>
</div>
</div>
<div id="infoblock" class="row displayblock" style="display: none">
<div class="col-12 center mb-3">
<a href="#" onclick="$('#infoblock').fadeOut(1000); $('#fotoblock').slideDown('slow');" class="btn btn-outline-secondary"><i class="fas fa-arrow-up"></i>&nbsp;Bilder</a>
</div>
<div class="col-12">TODO: Diashow</div>
<div class="col-12 center">
<h2 class="headlinefont">Unsere Freizeiten</h2>
</div>
<script th:inline="javascript">
function selectCamp(name) {
$('.description').hide();
$('.campbtn').removeClass('btn-secondary').removeClass('text-white').addClass("btn-secondary-outline");
$('#camp_' + name).show();
$('#btn_' + name).addClass('btn-secondary').removeClass("btn-secondary-outline").addClass('text-white');
}
</script>
<div class="col-12 center">
<button class="btn btn-outline-secondary" onclick="$('.description').hide();$('#camp_rehe').show();">Rehe</button>
<button class="btn btn-outline-secondary" onclick="$('.description').hide();$('#camp_olfen').show();">Olfen</button>
<button class="btn btn-outline-secondary" onclick="$('.description').hide();$('#camp_growup').show();">Grow Up</button>
<button class="btn btn-outline-secondary" onclick="$('.description').hide();$('#camp_schweiz').show();">Schweiz</button>
<button class="btn btn-outline-secondary" onclick="$('.description').hide();$('#camp_heimfreizeit').show();">Heimfreizeit</button>
<button id="btn_rehe" class="btn btn-outline-secondary campbtn" onclick="selectCamp('rehe')">Rehe</button>
<button id="btn_olfen" class="btn btn-outline-secondary campbtn" onclick="selectCamp('olfen')">Olfen</button>
<button id="btn_growup" class="btn btn-outline-secondary campbtn" onclick="selectCamp('growup')">Grow Up</button>
<button id="btn_schweiz" class="btn btn-outline-secondary campbtn" onclick="selectCamp('schweiz')">Schweiz</button>
<button id="btn_heimfreizeit" class="btn btn-outline-secondary campbtn" onclick="selectCamp('heimfreizeit')">Heimfreizeit</button>
</div>
<div id="camp_rehe" class="col-12 description" style="display: none">
<h2 class="headlinefont">Wochenendfreizeit in Rehe</h2>
@ -130,7 +156,7 @@
ein spannendes Nachtspiel handelt.</p>
<p>Gemeinschaft und Spaß kommen auf jeden Fall nicht zu kurz und auch im Glauben bietet dir die Hohenhaslach-Freizeit Herausforderung, wenn du dazu bereit bist!</p>
</div>
<div class="col-12 center">
<div class="col-12 center mt-3">
<a th:href="@{/camplist}" class="btn btn-outline-danger">zur Anmeldung</a>
</div>
</div>

2
src/main/resources/templates/template.html
View File

@ -10,7 +10,9 @@
<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/select2-bootstrap-5-theme.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="@{/webjars/fancyapps__fancybox/3.5.7/dist/jquery.fancybox.min.css}">
<script th:src="@{/webjars/jquery/3.7.1/jquery.min.js}"></script>
<script th:src="@{/webjars/fancyapps__fancybox/3.5.7/dist/jquery.fancybox.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>
<script th:src="@{/webjars/select2/4.0.13/js/select2.full.min.js}"></script>