<style>
/* FADE CAROUSEL */
.carousel-fade .carousel-inner .item {
transition-property: opacity;
transition-duration: 0.3s;
}
.carousel-fade .carousel-inner .item,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
opacity: 0;
}
.carousel-fade .carousel-inner .active,
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
opacity: 1;
}
.carousel-fade .carousel-inner .next,
.carousel-fade .carousel-inner .prev,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
left: 0;
transform: translate3d(0, 0, 0);
}
.carousel-fade .carousel-control {
z-index: 2;
}
/* smooth FADE out and FADE in next slide */
.carousel.fade {
opacity: 1;
}
.carousel.fade .item {
transition: opacity ease-out .7s;
left: 0;
opacity: 0; /* hide all slides */
top: 0;
position: absolute;
width: 100%;
display: block;
}
.carousel.fade .item:first-child {
top: auto;
opacity: 1; /* show first slide */
position: relative;
}
.carousel.fade .item.active {
opacity: 1;
}
.item.terminplan-animiert-carousel{
opacity: 1 !important;
transition-duration: 3s;
}
/* slide in animation */
.item.terminplan-animiert-carousel.active img{
animation: keyframe2 1.0s;
animation-iteration-count: 1;
animation-delay: 1s;
animation-fill-mode: forwards;
}
@keyframes keyframe2 {
0% {transform: translate(0%, 0%) scale(1);}
100% {transform: translate(-15%, 15%) scale(1.4);}
}
.item.terminplan-animiert-carousel .carousel-caption
{
opacity: 0;
}
.item.terminplan-animiert-carousel.active .carousel-caption{
animation: keyframe1 1.5s;
animation-iteration-count: 1;
animation-delay: 1s;
animation-fill-mode: forwards;
opacity: 0;
}
@keyframes keyframe1 {
0% { opacity: 0;}
100% { opacity: 1;}
}
/* animation terminplan */
.item .terminplan-animiert-rs-bg {
transition-duration: 0.1s;
margin: 0 auto;
}
.item .terminplan-animiert-rs-bg::before{
/*
https://www.thc-forsthof.de/images/rs/bookings_desktop-week-white-screen.png
*/
background: url(https://www.thc-forsthof.de/images/rs/bookings_desktop-week-white-screen.png);
background-size: 100% 100%;
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 1;
}
.terminplan-animiert-rs {
margin: 0 auto;
/* max-width: 385px;
width: 85%; */
box-sizing: border-box;
text-align:left;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-52%, -52%);
}
.terminplan-animiert-rs .grid {
padding: 0px;
-webkit-perspective: 1000px;
perspective: 1000px;
}
.terminplan-animiert-rs .grid .item {
background: #27272745;
background: #cedbc8;
color: #fff;
color: #333;
display: inline-block;
width: 100%;
border-radius: 0.3em;
padding: 0.3em;
box-sizing: border-box;
font-size: 0.85em;
position: absolute;
display: flex;
/* justify-content: center; */
align-items: center;
}
.terminplan-animiert-rs .grid .item div {
position: relative;
}
.terminplan-animiert-rs .grid .item.is-price {
justify-content: center;
}
.terminplan-animiert-rs .grid .item.is-visible.color1 span.dot,
.terminplan-animiert-rs .grid .item.is-visible.color1 {
background: #356F36;
color: #fff;
}
.terminplan-animiert-rs .grid .item.is-visible.color2 span.dot,
.terminplan-animiert-rs .grid .item.is-visible.color2 {
background: #993E3E;
color: #fff;
}
.terminplan-animiert-rs .grid .item.is-visible.color3 span.dot,
.terminplan-animiert-rs .grid .item.is-visible.color3 {
background: #778898;
color: #fff;
}
.terminplan-animiert-rs .grid .item.is-visible.color3 span.dot {
background: #f7ddb9;
color: #222;
}
.terminplan-animiert-rs .grid .item.is-visible.color4 span.dot,
.terminplan-animiert-rs .grid .item.is-visible.color4 {
background: #1F558A;
color: #fff;
}
.terminplan-animiert-rs .grid .item.is-booking:hover {
background: #999;
font-weight: bold;
color: #fff;
border-inline: 1px medium dashed #555;
cursor: pointer;
}
/* clean-white */
.terminplan-animiert-rs-bg.clean-white .terminplan-animiert-rs .grid .item.is-visible.color1,
.terminplan-animiert-rs-bg.clean-white .terminplan-animiert-rs .grid .item.is-visible.color2,
.terminplan-animiert-rs-bg.clean-white .terminplan-animiert-rs .grid .item.is-visible.color3,
.terminplan-animiert-rs-bg.clean-white .terminplan-animiert-rs .grid .item.is-visible.color4{
background: #778898;
transition: background-color 1000ms linear;
}
.terminplan-animiert-rs-bg.clean-dark .terminplan-animiert-rs .grid .item.is-visible.color1,
.terminplan-animiert-rs-bg.clean-dark .terminplan-animiert-rs .grid .item.is-visible.color2,
.terminplan-animiert-rs-bg.clean-dark .terminplan-animiert-rs .grid .item.is-visible.color3,
.terminplan-animiert-rs-bg.clean-dark .terminplan-animiert-rs .grid .item.is-visible.color4,
.terminplan-animiert-rs-bg.clean-dark .grid .item.is-training,
.terminplan-animiert-rs-bg.clean-dark .grid .item.is-medenspiel{
background: #111 !important;
transition: background-color 1000ms linear;
}
.terminplan-animiert-rs-bg.clean-white .is-booking .dot {
visibility: visible !important;
float: none !important;
}
/* .is-booking:hover .dot { visibility: visible; float: none; } */
.terminplan-animiert-rs-bg.clean-white .is-booking span.name {
visibility: hidden;
}
.terminplan-animiert-rs-bg.clean-white .is-booking span.name:after {
visibility: visible;
content: "belegt";
position: absolute;
font-weight: normal;
top: 0.2em;
left: 1.5em;
color: #fff;
line-height: 1.0em;
opacity: 0.5;
}
.dot {
height: 0.7em;
width: 0.7em;
background-color: #9999;
border-radius: 50%;
display: inline-block;
margin-right:0.3em;
margin-left: 0.3em;
visibility: collapse;
float: right;
}
.toogle-theme:after {
content: 'LEGO light mode';
top: 0px;
right: 0px;
left: auto;
color: #333;
line-height: 1.0em;
opacity: 0.9;
font-weight: bold;
}
.terminplan-animiert-rs-bg.clean-white .toogle-theme:after {
content: 'CLEAN anonym';
}
/* GAST */
.terminplan-animiert-rs .grid .item.is-gast {
background: rgb(222 124 124 / 50%);
padding-left: 1em;;
}
/*
.terminplan-animiert-rs .grid .item.is-gast:hover {
background: gold;
}
*/
.terminplan-animiert-rs .grid .item.is-training,
.terminplan-animiert-rs .grid .item.is-medenspiel {
background: #778898 !important;
color: #fff;
font-weight: bold;
font-size: 1.2em;
line-height: 1em;
padding-top: 0.5em;
padding-left: 0.5em;
display: flex;
justify-content: flex-start;
align-items: flex-start;
}
.terminplan-animiert-rs .grid .item.is-training::after,
.terminplan-animiert-rs .grid .item.is-medenspiel::after {
color: #fff;
font-weight: normal;
font-size: 0.7em;
line-height: 1em;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding-top: 2.1em;
padding-left: 0.7em;
opacity: 0.5;
}
/* TRAINING */
.terminplan-animiert-rs .grid .item.is-training {
}
.terminplan-animiert-rs .grid .item.is-training::after {
content: "Schule BSV";
}
.terminplan-animiert-rs .grid .item.is-training.item-47::after{content: "Training mit Charly";}
.terminplan-animiert-rs .grid .item.is-training.item-12::after{content: "Frühstunde BSV 9a";}
.terminplan-animiert-rs .grid .item.is-training:hover {
background: #111 !important;
color: #fff !important;
}
/* MEDENSPIEL */
.terminplan-animiert-rs .grid .item.is-medenspiel{
}
.terminplan-animiert-rs .grid .item.is-medenspiel::after{
content: "Damen VI";
background-image: url(https://thc-forsthof.de/images/rs/custom-schule-logo.png);
background-size: 90%;
background-repeat: no-repeat;
background-position: 3em center;
height: 100%;
}
.terminplan-animiert-rs .grid .item.is-medenspiel:hover{
background: #111 !important;
}
.terminplan-animiert-rs .grid .item {
opacity: 0.1;
}
.terminplan-animiert-rs .grid .item.animated.is-visible {
animation: Items 900ms ease-in forwards;
}
@keyframes Items {
0% {
opacity: 0.1;
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
50% {
-webkit-transform: rotateY(-90deg);
transform: rotateY(-90deg);
}
100% {
opacity: 1;
}
}
.terminplan-animiert-rs .grid .item.is-court,
.terminplan-animiert-rs .grid .item.is-clock {
color: #fff !important;
color: #333 !important;
font-size: 1em;
background: transparent !important;
display: flex;
justify-content: center;
align-items: center;
}
.terminplan-animiert-rs .grid .item.is-clock {
font-weight: bold;
font-size: 0.85em;
}
.terminplan-animiert-rs .grid .item.is-court {
justify-content: center;
}
.terminplan-animiert-rs .grid .item.is-clock {
padding-right: 1.5em;
justify-content: flex-end;
}
.terminplan-animiert-rs .grid .item.item-0 {
background: transparent !important;
}
/* DEBUG */
#carousel-desktop-feature {
width: 100%;
margin: 0 auto;
max-width: 550px;
}
</style>
<!-- START TESTUMGEBUNG-->
</head>
<body>
<div id="carousel-desktop-feature" class="carousel slide carousel-fade" data-ride="carousel" data-interval="false">
<div class="carousel-inner">
<div class="item active" data-interval="2000">
<img style="filter: grayscale(40%);" class="img100" src="https://www.thc-forsthof.de/images/rs/bookings_desktop-week.png" alt="Terminplan Ansicht - mobile">
</div>
<div class="item terminplan-animiert-carousel" data-interval="9000">
<img style="filter: grayscale(20%);" class="atf img100" src="https://www.thc-forsthof.de/images/rs/bookings_desktop-week.png" alt="Terminplan Ansicht - mobile" />
<div class="carousel-caption" style="top:0; left: 0; right:0; bottom: 0; background: rgba(0,0,0,0); padding-top: 0px; padding-bottom: 0px; text-shadow: initial;">
<!--schnipp -->
<div class="terminplan-animiert-rs-bg">
<div class="terminplan-animiert-rs">
<!-- <h3 style="margin-top: 0; opacity:0.5;font-size: 1.3em; line-height: 1em">Terminplan <small>- optimiert für Mobile Geräte</small></h3> -->
<!-- HIER WERDEN DIE DATEN per jQuery eingeschoben // ehemalig-->
<div class="grid" style="position: relative;">
<div data-item="0" data-col="1" data-row="1"></div>
<div data-item="1" data-col="2" data-row="1"></div>
<div data-item="2" data-col="3" data-row="1"></div>
<div data-item="3" data-col="4" data-row="1"></div>
<div data-item="4" data-col="5" data-row="1"></div>
<div data-item="5" data-col="6" data-row="1"></div>
<div data-item="6" data-col="7" data-row="1"></div>
<div data-item="7" data-col="8" data-row="1"></div>
<div data-item="8" data-col="9" data-row="1"></div>
<div data-item="9" data-col="1" data-row="2"></div>
<div data-item="10" data-col="2" data-row="2"></div>
<div data-item="11" data-col="3" data-row="2"></div>
<div data-item="12" data-col="4" data-row="2" data-type="item-training"></div>
<div data-item="13" data-col="6" data-row="2"></div>
<div data-item="14" data-col="7" data-row="2"></div>
<div data-item="15" data-col="8" data-row="2"></div>
<div data-item="16" data-col="9" data-row="2"></div>
<div data-item="17" data-col="1" data-row="3"></div>
<div data-item="18" data-col="2" data-row="3"></div>
<div data-item="19" data-col="3" data-row="3"></div>
<div data-item="20" data-col="6" data-row="3"></div>
<div data-item="21" data-col="7" data-row="3"></div>
<div data-item="22" data-col="8" data-row="3"></div>
<div data-item="23" data-col="9" data-row="3"></div>
<div data-item="24" data-col="1" data-row="4"></div>
<div data-item="25" data-col="2" data-row="4"></div>
<div data-item="26" data-col="3" data-row="4"></div>
<div data-item="27" data-col="6" data-row="4"></div>
<div data-item="28" data-col="7" data-row="4"></div>
<div data-item="29" data-col="8" data-row="4"></div>
<div data-item="30" data-col="9" data-row="4"></div>
<div data-item="31" data-col="1" data-row="5"></div>
<div data-item="32" data-col="2" data-row="5"></div>
<div data-item="33" data-col="3" data-row="5"></div>
<div data-item="34" data-col="4" data-row="5"></div>
<div data-item="35" data-col="5" data-row="5"></div>
<div data-item="36" data-col="6" data-row="5"></div>
<div data-item="37" data-col="7" data-row="5"></div>
<div data-item="38" data-col="8" data-row="5"></div>
<div data-item="39" data-col="9" data-row="5"></div>
<div data-item="40" data-col="1" data-row="6"></div>
<div data-item="41" data-col="2" data-row="6"></div>
<div data-item="42" data-col="3" data-row="6"></div>
<div data-item="43" data-col="4" data-row="6"></div>
<div data-item="44" data-col="5" data-row="6"></div>
<div data-item="45" data-col="6" data-row="6"></div>
<div data-item="46" data-col="7" data-row="6"></div>
<div data-item="47" data-col="8" data-row="6" data-type="item-training"></div>
<div data-item="48" data-col="1" data-row="7"></div>
<div data-item="49" data-col="2" data-row="7"></div>
<div data-item="50" data-col="3" data-row="7"></div>
<div data-item="51" data-col="4" data-row="7"></div>
<div data-item="52" data-col="5" data-row="7"></div>
<div data-item="53" data-col="6" data-row="7"></div>
<div data-item="54" data-col="7" data-row="7"></div>
<div data-item="55" data-col="1" data-row="8"></div>
<div data-item="56" data-col="2" data-row="8"></div>
<div data-item="57" data-col="3" data-row="8"></div>
<div data-item="58" data-col="4" data-row="8"></div>
<div data-item="59" data-col="5" data-row="8"></div>
<div data-item="60" data-col="6" data-row="8"></div>
<div data-item="61" data-col="7" data-row="8"></div>
<div data-item="62" data-col="1" data-row="9"></div>
<div data-item="63" data-col="2" data-row="9"></div>
<div data-item="64" data-col="3" data-row="9"></div>
<div data-item="65" data-col="4" data-row="9"></div>
<div data-item="66" data-col="5" data-row="9"></div>
<div data-item="67" data-col="6" data-row="9"></div>
<div data-item="68" data-col="7" data-row="9"></div>
<div data-item="69" data-col="8" data-row="9"></div>
<div data-item="70" data-col="9" data-row="9"></div>
<div data-item="71" data-col="1" data-row="10"></div>
<div data-item="72" data-col="2" data-row="10"></div>
<div data-item="73" data-col="3" data-row="10"></div>
<div data-item="74" data-col="4" data-row="10" data-type="item-medenspiel"></div>
<div data-item="75" data-col="7" data-row="10"></div>
<div data-item="76" data-col="8" data-row="10"></div>
<div data-item="77" data-col="9" data-row="10"></div>
<div data-item="78" data-col="1" data-row="11"></div>
<div data-item="79" data-col="2" data-row="11"></div>
<div data-item="80" data-col="3" data-row="11"></div>
<div data-item="81" data-col="7" data-row="11"></div>
<div data-item="82" data-col="8" data-row="11" data-type="item-training"></div>
<div data-item="83" data-col="1" data-row="12"></div>
<div data-item="84" data-col="2" data-row="12"></div>
<div data-item="85" data-col="3" data-row="12"></div>
<div data-item="86" data-col="7" data-row="12"></div>
<div data-item="87" data-col="1" data-row="13"></div>
<div data-item="88" data-col="2" data-row="13"></div>
<div data-item="89" data-col="3" data-row="13"></div>
<div data-item="90" data-col="7" data-row="13"></div>
<div data-item="91" data-col="1" data-row="14"></div>
<div data-item="92" data-col="2" data-row="14"></div>
<div data-item="93" data-col="3" data-row="14"></div>
<div data-item="94" data-col="7" data-row="14"></div>
<div data-item="95" data-col="8" data-row="14"></div>
<div data-item="96" data-col="9" data-row="14"></div>
<div data-item="97" data-col="1" data-row="15"></div>
<div data-item="98" data-col="2" data-row="15"></div>
<div data-item="99" data-col="3" data-row="15"></div>
<div data-item="100" data-col="7" data-row="15"></div>
<div data-item="101" data-col="8" data-row="15"></div>
<div data-item="102" data-col="9" data-row="15"></div>
</div>
<div style="font-size: 9px; color:#999;" >Theme: <span class="toogle-theme"></span></div>
</div>
</div>
<!-- schnapp -->
</div>
</div>
<div class="item" data-interval="2000">
<img style="filter: grayscale(30%);" class="img100" src="https://www.thc-forsthof.de/images/rs/bookings_mobile-week.png" alt="Mobiles Interface - Terminplan Ansicht">
</div>
<!-
-->
<!-- Controls
<a class="left carousel-control" href="#carousel-desktop-feature" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a> -->
<a class="right carousel-control" href="#carousel-desktop-feature" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
<!-- ENDE TESTUMGEBUNG-->
<script>
(function ($) {
setTimeout( function() {
$(this).runStartTerminplanScript();
// alert('loaded');
// },2500);
},1500); // TESTUMGEBUNG
$.fn.runStartTerminplanScript = function() {
// if (jQuery) { alert ("jQuery loaded"); } else { alert (" jQuery not loaded"); }
window.addEventListener("resize", SetupGridResizeEvent);
function SetupGridResizeEvent(){
SetupGrid();
FireUpAnimation();
}
// ##################################
// MAIN
// ##################################
// SetupHtml ();
SetupGrid();
// Individual Carousel Item - Duration
var t;
var start = $('#carousel-desktop-feature').find('.active').attr('data-interval');
t = setTimeout(function () {
$('#carousel-desktop-feature').carousel('next')
}, start);
$('#carousel-desktop-feature').on('slid.bs.carousel', function () {
clearTimeout(t);
var duration = $('#carousel-desktop-feature').find('.active').attr('data-interval');
//$('#carousel-desktop-feature').carousel('pause');
t = setTimeout("$('#carousel-desktop-feature').carousel('next');", duration);
})
$('.carousel-control.right').on('click', function () {
clearTimeout(t);
});
$('.carousel-control.left').on('click', function () {
clearTimeout(t);
});
// fire it up
$("#carousel-desktop-feature").on('slid.bs.carousel', function () {
var currentIndex = $('#carousel-desktop-feature div.item.active').index() + 1;
if(currentIndex==2){
// console.log("#carousel-desktop-feature mod-terminplan-animiert-rs: is fired");
FireUpAnimation ();
}
})
// MAIN END
/*
function SetupHtml () {
datahtml_terminplan = `
<div data-item="0" data-col="1" data-row="1"></div>
<div data-item="1" data-col="2" data-row="1"></div>
<div data-item="2" data-col="3" data-row="1"></div>
<div data-item="3" data-col="4" data-row="1"></div>
<div data-item="4" data-col="5" data-row="1"></div>
<div data-item="5" data-col="6" data-row="1"></div>
<div data-item="6" data-col="7" data-row="1"></div>
<div data-item="7" data-col="8" data-row="1"></div>
<div data-item="8" data-col="9" data-row="1"></div>
<div data-item="9" data-col="1" data-row="2"></div>
<div data-item="10" data-col="2" data-row="2"></div>
<div data-item="11" data-col="3" data-row="2"></div>
<div data-item="12" data-col="4" data-row="2" data-type="item-training"></div>
<div data-item="13" data-col="6" data-row="2"></div>
<div data-item="14" data-col="7" data-row="2"></div>
<div data-item="15" data-col="8" data-row="2"></div>
<div data-item="16" data-col="9" data-row="2"></div>
<div data-item="17" data-col="1" data-row="3"></div>
<div data-item="18" data-col="2" data-row="3"></div>
<div data-item="19" data-col="3" data-row="3"></div>
<div data-item="20" data-col="6" data-row="3"></div>
<div data-item="21" data-col="7" data-row="3"></div>
<div data-item="22" data-col="8" data-row="3"></div>
<div data-item="23" data-col="9" data-row="3"></div>
<div data-item="24" data-col="1" data-row="4"></div>
<div data-item="25" data-col="2" data-row="4"></div>
<div data-item="26" data-col="3" data-row="4"></div>
<div data-item="27" data-col="6" data-row="4"></div>
<div data-item="28" data-col="7" data-row="4"></div>
<div data-item="29" data-col="8" data-row="4"></div>
<div data-item="30" data-col="9" data-row="4"></div>
<div data-item="31" data-col="1" data-row="5"></div>
<div data-item="32" data-col="2" data-row="5"></div>
<div data-item="33" data-col="3" data-row="5"></div>
<div data-item="34" data-col="4" data-row="5"></div>
<div data-item="35" data-col="5" data-row="5"></div>
<div data-item="36" data-col="6" data-row="5"></div>
<div data-item="37" data-col="7" data-row="5"></div>
<div data-item="38" data-col="8" data-row="5"></div>
<div data-item="39" data-col="9" data-row="5"></div>
<div data-item="40" data-col="1" data-row="6"></div>
<div data-item="41" data-col="2" data-row="6"></div>
<div data-item="42" data-col="3" data-row="6"></div>
<div data-item="43" data-col="4" data-row="6"></div>
<div data-item="44" data-col="5" data-row="6"></div>
<div data-item="45" data-col="6" data-row="6"></div>
<div data-item="46" data-col="7" data-row="6"></div>
<div data-item="47" data-col="8" data-row="6" data-type="item-training"></div>
<div data-item="48" data-col="1" data-row="7"></div>
<div data-item="49" data-col="2" data-row="7"></div>
<div data-item="50" data-col="3" data-row="7"></div>
<div data-item="51" data-col="4" data-row="7"></div>
<div data-item="52" data-col="5" data-row="7"></div>
<div data-item="53" data-col="6" data-row="7"></div>
<div data-item="54" data-col="7" data-row="7"></div>
<div data-item="55" data-col="1" data-row="8"></div>
<div data-item="56" data-col="2" data-row="8"></div>
<div data-item="57" data-col="3" data-row="8"></div>
<div data-item="58" data-col="4" data-row="8"></div>
<div data-item="59" data-col="5" data-row="8"></div>
<div data-item="60" data-col="6" data-row="8"></div>
<div data-item="61" data-col="7" data-row="8"></div>
<div data-item="62" data-col="1" data-row="9"></div>
<div data-item="63" data-col="2" data-row="9"></div>
<div data-item="64" data-col="3" data-row="9"></div>
<div data-item="65" data-col="4" data-row="9"></div>
<div data-item="66" data-col="5" data-row="9"></div>
<div data-item="67" data-col="6" data-row="9"></div>
<div data-item="68" data-col="7" data-row="9"></div>
<div data-item="69" data-col="8" data-row="9"></div>
<div data-item="70" data-col="9" data-row="9"></div>
<div data-item="71" data-col="1" data-row="10"></div>
<div data-item="72" data-col="2" data-row="10"></div>
<div data-item="73" data-col="3" data-row="10"></div>
<div data-item="74" data-col="4" data-row="10" data-type="item-medenspiel"></div>
<div data-item="75" data-col="7" data-row="10"></div>
<div data-item="76" data-col="8" data-row="10"></div>
<div data-item="77" data-col="9" data-row="10"></div>
<div data-item="78" data-col="1" data-row="11"></div>
<div data-item="79" data-col="2" data-row="11"></div>
<div data-item="80" data-col="3" data-row="11"></div>
<div data-item="81" data-col="7" data-row="11"></div>
<div data-item="82" data-col="8" data-row="11" data-type="item-training"></div>
<div data-item="83" data-col="1" data-row="12"></div>
<div data-item="84" data-col="2" data-row="12"></div>
<div data-item="85" data-col="3" data-row="12"></div>
<div data-item="86" data-col="7" data-row="12"></div>
<div data-item="87" data-col="1" data-row="13"></div>
<div data-item="88" data-col="2" data-row="13"></div>
<div data-item="89" data-col="3" data-row="13"></div>
<div data-item="90" data-col="7" data-row="13"></div>
<div data-item="91" data-col="1" data-row="14"></div>
<div data-item="92" data-col="2" data-row="14"></div>
<div data-item="93" data-col="3" data-row="14"></div>
<div data-item="94" data-col="7" data-row="14"></div>
<div data-item="95" data-col="8" data-row="14"></div>
<div data-item="96" data-col="9" data-row="14"></div>
<div data-item="97" data-col="1" data-row="15"></div>
<div data-item="98" data-col="2" data-row="15"></div>
<div data-item="99" data-col="3" data-row="15"></div>
<div data-item="100" data-col="7" data-row="15"></div>
<div data-item="101" data-col="8" data-row="15"></div>
<div data-item="102" data-col="9" data-row="15"></div>
`
$( '.terminplan-animiert-rs .grid').append( datahtml_terminplan );
}
*/
function SetupGridForWindowSize (itemWidth,itemHeight,itemBorder) {
$('.terminplan-animiert-rs .grid').find('*').each(function(){
$(this).addClass('item');
$(this).html($(this).data( "item" ));
faktor=1
if($(this).data( "type" ) == "item-training"){ faktor=3 }
if($(this).data( "type" ) == "item-medenspiel"){ faktor=6 }
$(this).css({ height: ((itemHeight * faktor) - itemBorder) + "px" });
$(this).css({ top: (itemHeight * ($(this).data( "row" ) - 1)) + "px" })
faktor=1
if($(this).data( "type" ) == "item-training"){ faktor=2 }
if($(this).data( "type" ) == "item-medenspiel"){ faktor=3 }
$(this).css({ width: ((itemWidth * faktor) - itemBorder) + "px" });
$(this).css({ left: (itemWidth * ($(this).data( "col") - 1)) + "px" })
// console.log(((itemWidth * faktor) - itemBorder) + "px" + ' ' + itemWidth * ($(this).data( "col" ) - 1) + "px"); // DEBUG
})
$('.terminplan-animiert-rs').css({ width: (9 * itemWidth) + "px" });
$('.terminplan-animiert-rs .grid').css({ height: (15 * itemHeight) + "px" });
}
function SetupGrid() {
var widthParent = $("#carousel-desktop-feature").width();
var heightParent = $("#carousel-desktop-feature").height();
// console.log("Width: " + widthParent + ", " + "Height: " + heightParent); // DEBUG
$('.terminplan-animiert-rs-bg').css({ width: (widthParent) + "px" });
$('.terminplan-animiert-rs-bg').css({ height: (heightParent) + "px" });
w = widthParent * 0.8 / 9;
h = ((heightParent *0.8) - 60) / 15;
if ( h > 20 ) { h = 20; }
if ( w > 60 ) { w = 60; }
b = 2;
SetupGridForWindowSize(w,h,b);
// Setup Fontsize
fontsize = 10;
if ( w < 50 ) { fontsize = 9; }
if ( w < 40 ) { fontsize = 8; }
if ( w < 30 ) { fontsize = 7; }
$('.terminplan-animiert-rs .grid').css({ fontSize: fontsize + 'px'});
}
function FireUpAnimation () {
//// $('.terminplan-animiert-rs .grid').css("opacity", "0");
const rn= [];
// RANDOM NAMES
rn[0]='-----';
rn[1]='Zeynep';
rn[2]='Andreas';
rn[3]='Helmut';
rn[4]='Ivonne';
rn[5]='Rolf';
rn[6]='Rainer';
rn[7]='Eymen';
rn[8]='Azra';
rn[9]='Meryem';
rn[10]='Mian';
rn[11]='Juan';
rn[12]='Han';
rn[13]='Matteo';
rn[14]='Marco';
rn[15]='Andrea';
rn[16]='Marlo';
rn[17]='Marian';
rn[18]='Damian';
rn[19]='Adam';
rn[20]='Fabian';
rn[21]='Daniel';
rn[22]='Georgios';
rn[23]='Linos';
rn[24]='Timm';
rn[25]='Alexios';
rn[26]='Michael';
rn[27]='Andre';
rn[28]='Jürgen';
function mr() {
rlast =28;
var a = Math.floor((Math.random() * rlast) + 1);
return rn[a]
}
// neuer Namensraum
var attr = {
names: [],
namesbefore: [],
bgcolor: [],
type: [],
bar: {}
};
var stunde=0;
for (let i = 0; i < 110; i++) {
// PREISE
attr.type[i]="isprice";
attr.names[i]='€ 9,-';
if (i > 18) { attr.names[i]='€ 12,-'; };
if (i > 50) { attr.names[i]='€ 17,-'; };
if (i > 70) { attr.names[i]='€ 22,-'; };
if (i > 95) { attr.names[i]='€ 16,-'; };
// if (i % 9 == 0) { attr.names[i]='€ 15,-'; };
attr.namesbefore[i]=attr.names[i];
// BUCHUNGEN EINZELSTDUNDE
var isbooking=false;
for(var n = 1; n <= 40; n++){
if ( (i-13)%9 == 1 ){
isbooking=true;
attr.bgcolor[i]="color1";
// console.log ( i + ": " + attr.bgcolor[i]);
}
if ( (i-15)%4 == 1 ){
isbooking=true;
attr.bgcolor[i]="color2";
}
if ( (i-24)%5 == 1 ){
isbooking=true;
attr.bgcolor[i]="color3";
}
if ( (i-30)%7 == 1 ){
isbooking=true;
attr.bgcolor[i]="color4";
}
}
if ( isbooking ){
attr.names[i]=mr();
attr.type[i]="isbooking";
// console.log(attr.bgcolor[i])
}
// Uhrzeiten
if ( [9, 17, 24, 31, 40, 48, 55, 62, 71, 78, 83, 87, 91, 97].indexOf(i) >= 0 ) {
stunde+=1;
attr.names[i]= (stunde + 8) + ':00';
attr.namesbefore[i]=attr.names[i];
attr.type[i]="isclock";
}
// PLÄTZE
if ( i < 9) {
attr.names[i]="Platz " + i;
attr.namesbefore[i]=attr.names[i];
attr.type[i]="iscourt";
}
// GÄSTE
if ( [21, 22].indexOf(i) >= 0 ) {
attr.names[i]='';
attr.type[i]="isgast";
}
// TRAINING
if ( [12, 47, 82].indexOf(i) >= 0 ) {
attr.names[i]='TRAINING';
attr.namesbefore[i]=attr.names[i];
attr.type[i]="istraining";
}
// MEDENSPIEL
if ( i == 74 ) {
attr.names[i]='MEDENSPIEL';
attr.namesbefore[i]=attr.names[i];
attr.type[i]="ismedenspiel";
}
}
attr.names[0]="";
// $('.terminplan-animiert-rs .grid .item').css("opacity", "0");
$('.terminplan-animiert-rs .grid .item').removeClass('is-visible');
$('.terminplan-animiert-rs .item').each(function(i){
if ( ["1", "2", "8", "9"].includes( $('.terminplan-animiert-rs .grid .item').eq(i).attr('data-col') ) ) {
$('.terminplan-animiert-rs .grid .item').eq(i).addClass('is-visible static');
}
$('.terminplan-animiert-rs .grid .item').eq(i).addClass( "item-"+ i);
$('.terminplan-animiert-rs .grid .item').eq(i).html(attr.namesbefore[i]);
$('.terminplan-animiert-rs .grid .item').eq(i).addClass('animated');
// $('.terminplan-animiert-rs .grid .item').eq(i).addClass('is-price');
var html_names ='<div><span>' + attr.names[i] + '</span></div>'; // default
var html_names_booking ='<div><span class="dot"></span>' + '<span class="name">' + attr.names[i] + '</span></div>'
if (attr.type[i] == "isprice" ) {
// console.log( i + ' is-price');
$('.terminplan-animiert-rs .grid .item').eq(i).addClass('is-visible static is-price');
}
if (attr.type[i] == "isbooking" ) {
$('.terminplan-animiert-rs .grid .item').eq(i).addClass('is-booking ' + attr.bgcolor[i]);
$('.terminplan-animiert-rs .grid .item').eq(i).addClass('is-price'); // later removed
html_names = html_names_booking;
// console.log(attr.bgcolor[i]);
}
if (attr.type[i] == "isclock" ) {
$('.terminplan-animiert-rs .grid .item').eq(i).addClass('is-visible static is-clock');
}
if (attr.type[i] == "iscourt" ) {
$('.terminplan-animiert-rs .grid .item').eq(i).addClass('is-visible static is-court');
}
if (attr.type[i] == "istraining" ) {
$('.terminplan-animiert-rs .grid .item').eq(i).addClass('is-training');
}
if (attr.type[i] == "isgast" ) {
$('.terminplan-animiert-rs .grid .item').eq(i).addClass('is-visible static is-gast ');
html_names = html_names_booking;
}
if (attr.type[i] == "ismedenspiel" ) {
$('.terminplan-animiert-rs .grid .item').eq(i).addClass('is-medenspiel ');
}
if ( i < 19 ) {
$('.terminplan-animiert-rs .grid .item').eq(i).addClass('is-visible static');
}
// type[i] { isprice isbooking isclock iscourt isgast istraining ismedenspiel }
if($('.terminplan-animiert-rs .grid .item').eq(i).hasClass("static")){
$('.terminplan-animiert-rs .grid .item').eq(i).removeClass('animated');
$('.terminplan-animiert-rs .grid .item').eq(i).html(html_names);
if($('.terminplan-animiert-rs .grid .item').eq(i).hasClass("is-booking")){
$('.terminplan-animiert-rs .grid .item').eq(i).removeClass('is-price');
}
}
$('.terminplan-animiert-rs .grid .item').eq(i).css("opacity", "1");
setTimeout(function(){
// count++
// console.log(oldcount);
// console.log(count);
// console.log(600 + ( 5 * i * ( ( 10 * i + 720 ) % 37 )) % 3500);
if($('.terminplan-animiert-rs .grid .item').eq(i).hasClass("animated")){
$('.terminplan-animiert-rs .grid .item').eq(i).removeClass('is-price');
$('.terminplan-animiert-rs .grid .item').eq(i).html(html_names);
$('.terminplan-animiert-rs .item').eq(i).addClass('is-visible');
}
}, 900 + ( 5 * i * ( ( 10 * i + 720 ) % 37 )) % 3500);
});
//$('.terminplan-animiert-rs-bg').addClass('clean-white ');
//// $('.terminplan-animiert-rs .grid').css("opacity", "1");
// return
// Ansicht CLEAN anonym
$('.terminplan-animiert-rs-bg').removeClass('clean-white ');
setTimeout(function(){
$('.terminplan-animiert-rs-bg').addClass('clean-white ');
}, 6000);
return
// New
$('.terminplan-animiert-rs-bg').removeClass('clean-dark');
setTimeout(function(){
$('.terminplan-animiert-rs-bg').addClass('clean-dark');
}, 7500);
// reset
setTimeout(function(){
// $('.terminplan-animiert-rs-bg').removeClass('clean-white ');
$('.terminplan-animiert-rs-bg').removeClass('clean-dark ');
}, 11500);
$( ".toogle-theme" ).click(function() {
$('.terminplan-animiert-rs-bg').toggleClass( "clean-white" );
});
// } if FIRE IT UP
// })
}
// alert('RUN');
};
}(jQuery));
</script>