WeihnachtsKalenderMelly/tab/kalender.php

<div class="kalender">

	<div class="active" id="ak1">
		<a href="?tab=tuer&nr=1">
			<h3 id="hiddenTuer">Tür 01</h3>
			<div class="left"><span>1</span></div>
		</a>
	</div>
	<div class="active" id="ak2">
		<a href="?tab=tuer&nr=2">
			<h3 id="hiddenTuer">Tür 02</h3>
			<div class="left"><span>2</span></div>
		</a>
	</div>
	<div class="active" id="ak3">
		<a href="?tab=tuer&nr=3">
			<h3 id="hiddenTuer">Tür 03</h3>
			<div class="left"><span>3</span></div>
		</a>
	</div>
	<div class="active" id="ak4">
		<a href="?tab=tuer&nr=4">
			<h3 id="hiddenTuer">Tür 04</h3>
			<div class="left"><span>4</span></div>
		</a>
	</div>
	<div class="active" id="ak5">
		<a href="?tab=tuer&nr=5">
			<h3 id="hiddenTuer">Tür 05</h3>
			<div class="left"><span>5</span></div>
		</a>
	</div>
	<div class="active" id="ak6">
		<a href="?tab=tuer&nr=6">
			<h3 id="hiddenTuer">Tür 06</h3>
			<div class="left"><span>6</span></div>
		</a>
	</div>
	<div class="active" id="ak7">
		<a href="?tab=tuer&nr=7">
			<h3 id="hiddenTuer">Tür 07</h3>
			<div class="left"><span>7</span></div>
		</a>
	</div>
	<div class="active" id="ak8">
		<a href="?tab=tuer&nr=8">
			<h3 id="hiddenTuer">Tür 08</h3>
			<div class="left"><span>8</span></div>
		</a>
	</div>
	<div class="active" id="ak9">
		<a href="?tab=tuer&nr=9">
			<h3 id="hiddenTuer">Tür 09</h3>
			<div class="left"><span>9</span></div>
		</a>
	</div>
	<div class="active" id="ak10">
		<a href="?tab=tuer&nr=10">
			<h3 id="hiddenTuer">Tür 10</h3>
			<div class="left"><span>10</span></div>
		</a>
	</div>
	<div class="active" id="ak11">
		<a href="?tab=tuer&nr=11">
			<h3 id="hiddenTuer">Tür 11</h3>
			<div class="left"><span>11</span></div>
		</a>
	</div>
	<div class="active" id="ak12">
		<a href="?tab=tuer&nr=12">
			<h3 id="hiddenTuer">Tür 12</h3>
			<div class="left"><span>12</span></div>
		</a>
	</div>
	<div class="active" id="ak13">
		<a href="?tab=tuer&nr=13">
			<h3 id="hiddenTuer">Tür 13</h3>
			<div class="left"><span>13</span></div>
		</a>
	</div>
	<div class="active" id="ak14">
		<a href="?tab=tuer&nr=14">
			<h3 id="hiddenTuer">Tür 14</h3>
			<div class="left"><span>14</span></div>
		</a>
	</div>
	<div class="active" id="ak15">
		<a href="?tab=tuer&nr=15">
			<h3 id="hiddenTuer">Tür 15</h3>
			<div class="left"><span>15</span></div>
		</a>
	</div>
	<div class="active" id="ak16">
		<a href="?tab=tuer&nr=16">
			<h3 id="hiddenTuer">Tür 16</h3>
			<div class="left"><span>16</span></div>
		</a>
	</div>
	<div class="active" id="ak17">
		<a href="?tab=tuer&nr=17">
			<h3 id="hiddenTuer">Tür 17</h3>
			<div class="left"><span>17</span></div>
		</a>
	</div>
	<div class="active" id="ak18">
		<a href="?tab=tuer&nr=18">
			<h3 id="hiddenTuer">Tür 18</h3>
			<div class="left"><span>18</span></div>
		</a>
	</div>
	<div class="active" id="ak19">
		<a href="?tab=tuer&nr=19">
			<h3 id="hiddenTuer">Tür 19</h3>
			<div class="left"><span>19</span></div>
		</a>
	</div>
	<div class="active" id="ak20">
		<a href="?tab=tuer&nr=20">
			<h3 id="hiddenTuer">Tür 20</h3>
			<div class="left"><span>20</span></div>
		</a>
	</div>
	<div class="active" id="ak21">
		<a href="?tab=tuer&nr=21">
			<h3 id="hiddenTuer">Tür 21</h3>
			<div class="left"><span>21</span></div>
		</a>
	</div>
	<div class="active" id="ak22">
		<a href="?tab=tuer&nr=22">
			<h3 id="hiddenTuer">Tür 22</h3>
			<div class="left"><span>22</span></div>
		</a>
	</div>
	<div class="active" id="ak23">
		<a href="?tab=tuer&nr=23">
			<h3 id="hiddenTuer">Tür 23</h3>
			<div class="left"><span>23</span></div>
		</a>
	</div>
	<div class="active" id="ak24">
		<a href="?tab=tuer&nr=24">
			<h3 id="hiddenTuer">Tür 24</h3>
			<div class="left"><span>24</span></div>
		</a>
	</div>
	
	<!-- Zusatz Türen-->
	
	<div class="türPlus">
	
	<div class="active" id="ak25">
		<a href="?tab=tuer&nr=25">
			<h3 id="hiddenTuer">Tür 25</h3>
			<div class="left"><span>25</span></div>
		</a>
	</div>
	<div class="active" id="ak26">
		<a href="?tab=tuer&nr=26">
			<h3 id="hiddenTuer">Tür 26</h3>
			<div class="left"><span>26</span></div>
		</a>
	</div>
	
	</div>
	
	<script>
		<?php
			$numberArray = [];
			for($i=1; $i<=26; $i++) {
				array_push($numberArray, $i);
			}
			shuffle($numberArray);
			echo "var dayMap = ". json_encode($numberArray) . ";\n";	

		?>



		const bgImages = [
		        "1-bibi_blocksberg", // 1
						"2-bernhard_blocksberg",
						"3-barbara_blocksberg",
						"4-karla_kolumna",
						"5-zickia",
						"6-malicia",
						"7-moni",
						"8-florian",
						"9-oma_grete",
						"10-marita",
						"11-eddi_eddison",
						"12-prof_friedrich_hagelkorn",
						"13-runzia",
						"14-herr_klappermann",
						"15-mathilde_mueller-riebensehl",
						"16-schubia_wanzhaar",
						"17-flauipaui",
						"18-buergermeister",
						"19-paul_pichler",
						"20-arkadia",
						"21-xenia",
						"22-walpurgia_besenstiel",
						"23-mania_flippinger",
						"24-erzaehler",
						"scheniiW"
	];
		console.log(dayMap);
		for(let i=1; i<=24; i++) {
			let id = "ak"+i;
			let n = dayMap[i-1];
			let parent = $("#"+id);
			let imageName = bgImages[n-1];
			let imageUrl = "src/images/bibi/"+imageName+".png";
            parent.find("span").css("background-image", "url(" + imageUrl + ")");
			parent.find("span").html(n);
			parent.find("h3").html(""+n);
			parent.find("a").attr("href","?tab=tuer&nr="+n);
		}

	</script>



</div>