index.php

@@ -19,12 +19,7 @@ if ($tab == "") {$tab = "home";}
     <script src="main/nav2.js"></script>
 </head>
 
-<!--header>
-
-    <h1>
-        Mellys Weihnachts Kalender
-    </h1>
-</header-->
+<!--header in tap/nav2.php  -->
     
     <?php include('tab/nav2.php');?>
 

src/sass/_kalender.sass

@@ -5,7 +5,7 @@ $marginLeftRight: 5px  // abstand linker und rechter rand
 $marginTop: 5px      
 $marginBetween: 5px     // abstand zwischen den Tueren
 $doorBorderSize: 1px    
-//$doorWidth: ($kalenderWidth - 3.5*$marginLeftRight - 3*$marginBetween)/4
+$doorWidth: ($kalenderWidth - 3.5*$marginLeftRight - 3*$marginBetween)/4
 
 /* ********************************
 
@@ -14,9 +14,10 @@ $doorBorderSize: 1px
   position: relative
   text-align: center
   width: $kalenderWidth
-  //height: #{6*($doorWidth+$doorBorderSize+$marginBetween)+2*$marginTop}
+  height: #{6*($doorWidth+$doorBorderSize+$marginBetween)+2*$marginTop}
   border: 1px solid black 
-  background: #fff url("../inc/bg/baum2.jpg") no-repeat
+  //background: #fff url("../inc/bg/baum2.jpg") no-repeat
+  background: #90C145
   /*background-size: $backgroundWidth
   background-size: $backgroundSize
   background-position: $bgPosition 
@@ -24,8 +25,8 @@ $doorBorderSize: 1px
   div
     position: absolute
     border: $doorBorderSize solid darkred
-    //width: $doorWidth
-    //height: $doorWidth
+    width: $doorWidth
+    height: $doorWidth
     overflow: hidden
     background: #fff
 
@@ -33,33 +34,49 @@ $doorBorderSize: 1px
     padding-top: 1.5rem
     font-weight: bold
     padding: 1rem
+    color: #E8690F
+    
+  a
+    text-decoration: none
+    
+  #hiddenTuer
+    margin: 1rem
+    max-height: auto
+    text-decoration: none
 
   span
     position: absolute
     display: inline-block
-    top: 1rem
-    left: 1rem
+    top: 0.5rem
+    left: 1.1rem
     font-size: 1rem
-    width: 1.2rem
-    height: 1.2rem
-    color: #FFF
-    background: #CD0000
+    width: 6rem
+    height: 6rem
+    color: darkred 
+    background-size: cover
+    text-align: left
+    text-shadow: 1px  1px 1px #fff, 1px -1px 1px #fff, -1px  1px 1px #fff, -1px -1px 1px #fff
+    //text-shadow: 0px 0px 2px darkred
+    //background-position: 2.4rem
+    //padding-right: 3rem 
+    //background-origin: padding-box
+    //background: no-repeat
 
   .left
     position: absolute
     left: 0
     top: 0
-    //width: #{$doorWidth+50}
-    //height: $doorWidth
+    width: #{$doorWidth+50}
+    height: $doorWidth
     display: block 
     border: none
-    background: #fff url("../inc/bg/baum2.jpg") no-repeat
+    //background: #fff url("../inc/bg/baum2.jpg") no-repeat
     /*background-size: $backgroundWidth
     background-size: $backgroundSize
     margin-left: $bgPosition
   a
     &:hover .left, &:focus .left
-      //left: #{-($doorWidth+60)}
+      left: #{-($doorWidth+60)}
 
     .left
       display: block
@@ -72,14 +89,11 @@ $doorBorderSize: 1px
 
   @for $row from 0 through 5
     @for $col from 0 through 3
-      //$leftCalc: $marginLeftRight+($doorWidth+$marginBetween+2*$doorBorderSize)*$col
-      //s$topCalc: $marginTop+($doorWidth+$marginBetween+2*$doorBorderSize)*$row
+      $leftCalc: $marginLeftRight+($doorWidth+$marginBetween+2*$doorBorderSize)*$col
+      $topCalc: $marginTop+($doorWidth+$marginBetween+2*$doorBorderSize)*$row
       #ak#{$row*4+$col+1}
-        //left: #{$leftCalc}
-        //top: #{$topCalc}
+        left: #{$leftCalc}
+        top: #{$topCalc}
         .left
-          //background-position: #{-($leftCalc+$doorBorderSize)} #{-($topCalc+$doorBorderSize)}
+          background-position: #{-($leftCalc+$doorBorderSize)} #{-($topCalc+$doorBorderSize)}
   
-#hiddenTuer
-  margin: 1rem
-  max-height: auto

src/sass/_nav2.sass

@@ -1,11 +1,11 @@
 // Navigation Variables
-$content-width: 100%
+$content-width: 1000px
 $breakpoint: 799px
 $nav-height: 70px
 $nav-background: hsl(0,0%,100%,0.5)
-$nav-font-color: darkred 
+$nav-font-color:  darkgreen 
 $link-hover-color: Lightgrey 
-$nav-background2: url("../inc/bg/christmas background.jpg") 0 86% no-repeat
+$nav-background2: url("../inc/bg/christmas-banner-6739203.jpg") 0 86% no-repeat
 
 // Blauer klik Hintergrund entfernen
 *:focus 
@@ -25,7 +25,7 @@ $nav-background2: url("../inc/bg/christmas background.jpg") 0 86% no-repeat
   border-radius: 0 0 2rem 2rem
   background-size: 100%
   border-bottom: 4px ridge darkgreen
-
+  background-size: 100%
 
 // Logo and branding
 .brand 
@@ -37,9 +37,10 @@ $nav-background2: url("../inc/bg/christmas background.jpg") 0 86% no-repeat
   font-size: 1.4em
   font-weight: bold
   text-shadow: 1px 0 #fff, 0 1px #fff, -1px 0 #fff, 0 -1px #fff
+  margin-top: -0.5rem 
   a,
   a:visited 
-    color: $nav-font-color
+    color: darkred 
     text-decoration: none
 
 
@@ -50,33 +51,41 @@ $nav-background2: url("../inc/bg/christmas background.jpg") 0 86% no-repeat
 
 
 // Navigation 
-nav 
+nav
+  display: block 
   float: right
   font-weight: bold
-  text-shadow: 1px 0 #fff, 0 1px #fff, -1px 0 #fff, 0 -1px #fff
+  //text-shadow: 1px 0 #fff, 0 1px #fff, -1px 0 #fff, 0 -1px #fff
+  padding-right: 1rem 
+  margin: 2rem 1rem 0 0
+  border-radius: 2rem 
+  background: hsl(0,0%,100%,0.7)
+
   ul 
     list-style: none
-    margin: 0
+    margin:  0
     padding: 0
     background-color: $nav-background
     li 
       float: left
       position: relative
+      padding: 0
+      
       a,
       a:visited 
         display: block
-        padding: 0 20px
-        line-height: $nav-height
+        padding: 0.5rem 0.5rem
+        //line-height: $nav-height
         color: $nav-font-color
         text-decoration: none
         
         &:hover, &:active, &.active
           //background: $link-hover-color
           color: red
-          transform: scale(1.1)
+          //transform: scale(1.1)
     
         &:not(:only-child):after
-          padding-left: 4px
+          padding-left: 10px
           content: '▾'
         
       // Dropdown list
@@ -96,7 +105,7 @@ nav
   z-index: 1
   box-shadow: 0 3px 12px rgba(0, 0, 0, 0.20)
   margin-top: 4px
-  font-weight: bold 
+  font-weight: bold
 
 
 /* Mobile navigation */
@@ -112,6 +121,8 @@ nav
 
 @media only screen and (max-width: 798px) 
   // Hamburger nav visible on mobile only
+  .brand
+    margin: auto 0
   .nav-mobile 
     display: block
   
@@ -119,6 +130,8 @@ nav
     width: 100%
     padding: $nav-height 0 15px 0
     text-shadow: none 
+    margin: 0px
+    background: none 
     ul 
       display: none
       border: 4px ridge darkgreen
@@ -126,12 +139,14 @@ nav
       
       li 
         float: none
+        padding-top: 0
         a 
           padding: 15px
-          line-height: 20px
+          background: none 
+          line-height: 15px
         
         ul li a 
-          padding-left: 30px
+          //padding-left: 30px
           
         
   .nav-dropdown
@@ -159,7 +174,7 @@ nav
     border-radius: 1px
     height: 5px
     width: 35px
-    background: $nav-font-color
+    background: black 
     position: absolute
     display: block
     content: ''

src/sass/_other.sass

@@ -1,12 +1,15 @@
 .titel
-  display: inline-block
-  /*background: url("../inc/teet/red navigation.png") no-repeat
-   background-size: 100%
-   background-position: 0px -63px
-  
-  img
+  //display: inline-block
+  //margin: 0 25%
+  //background: url("../inc/teet/red navigation.png") no-repeat
+  //background-size: 100%
+  //background-position: 0px -63px
+
+  > img
+    display: inline-block 
     max-width: 210px 
-    margin-top: 10px
+    margin-top: 15px
+    
   
   h3
     //text-decoration: underline
@@ -74,7 +77,7 @@ button
     border-radius: 5px
     background: linear-gradient(to bottom, #fefffd,#e7e9ea)
     font-weight: bold
-    padding: 5px 10px 5px 10px
+    //padding: 5px 10px 5px 10px
     color: black 
     
     
@@ -82,10 +85,7 @@ button
         color: black
         text-decoration: none
         padding: 0 0.5rem 0 0
-        
-    img
-        //max-width: 10rem
-        padding-right: 0.5rem
+
         
 .pList
     padding-bottom: 0.5rem
@@ -95,6 +95,7 @@ button
 
     img
         max-width: 1.5rem
+        padding-right: 0.5rem 
 
     button
         display: inline-flex
@@ -103,7 +104,32 @@ button
         margin-bottom: auto
         margin-top: auto
         padding: 0.5rem
+        
+.LFilme
+    display: inline-block
+    max-width: 80%
 
+    #film
+        padding: 0.5rem
+        float: left
+        
+        p:first-child 
+            border-bottom: 2px solid gray 
+            padding-bottom: 1rem
+    
+        img
+            max-width: 3rem
+            
+        #FCover
+            max-width: 10rem
+            border: 3px solid darkred
+
+            
+        button
+            padding: 0 0.5rem 0 0.5rem 
+            margin-bottom: auto
+            margin-top: auto
+    
 
 .üList
     display: inline-block
@@ -158,4 +184,13 @@ button
     width: 9rem
     height: 9rem
     border: 3px solid darkred
-    object-fit: cover
+    object-fit: cover
+    
+.neu
+    //display: inline-block 
+    border: 1px solid red 
+    padding: 0.5rem
+    font-weight: bold
+    color: darkred 
+    background: gainsboro
+    

src/sass/_tueren.sass

@@ -4,17 +4,53 @@
   h3
     color: darkred 
     text-decoration: underline
-    margin-top: 3rem
+    margin-top: 3.8rem
 
   #txt
     display: inline-block
     color: darkred
     font-family: Verdana, Arial, Helvetica, sans-serif
-    border: 4px ridge red
-    background: hsla(0, 0%, 100%, 0.4) url("../inc/bg/20201222_065407.png") -1px -5px no-repeat
-    background-size: 101%
-    padding: 0 1.5rem 1.5rem 1.5rem
+    border: 4px ridge  #90C145
+    background: hsla(0, 0%, 100%, 0.5) url("../inc/bg/1667917199713.png") -1px -5px no-repeat
+    background-size: 100%
+    //background: hsla(0, 0%, 100%, 0.5)
+    padding: 0 1.5rem 0 1.5rem
     width: 75%
+    
+    u
+      color: darkgreen
+      
+    #bibi
+      color: grey
+      u
+        color: grey
+      span
+        color: grey
+        margin: 1rem 0 0 0
+    
+  .schneei
+    
+    #SRechts
+      display: inline-block 
+      margin: -5px 8px 0 0
+      z-index: 5
+      width: 7rem
+      float: right
+      padding: 0
+      //border: 1px solid red
+      position: relative 
+
+      
+    #txt
+      clip-path: polygon(381px 0%, 100% 150px, 100% 100%, 0% 100%, 0% 0%)
+      margin-top: -140px
+      z-index: 0
+
+
+  img
+    display: inline-block
+    margin: 1rem 0 0 0
+    width: 50%
 
   p
     font-weight: 500

src/sass/main.sass

@@ -13,23 +13,7 @@ body
     /*background-color: #e2e4e6
     background-color: hsla(190, 50%, 80%, 0.7) 
 
-header
-    margin: auto
-    /*background-color: Lightgrey
-    background: url("../inc/bg/christmas background.jpg") 0 86% no-repeat
-    background-size: 100%
-    border-bottom: 4px ridge darkgreen
-    border-radius: 0 0 $headerRadios $headerRadios
-    text-align: center
-    padding: 20px
-    box-shadow: -1px -1px 5px silver, 1px 1px 5px black 
-
-    h1
-        color: red
-        text-decoration: underline
-        font-size: 1.5rem
-        font-weight: bold
-        text-shadow: 1px 1px 1px black 
+ 
         
 footer
     position: fixed

tab/filme.php

@@ -0,0 +1,66 @@
+<div class="titel">
+    <img src="inc/bg/1609858275128.png"></img>
+<h3>Filme</h3>
+</div>
+
+<div class="neu">
+<p>
+Hier entsteht ein neuer Tab
+</p>
+</div>
+<p></p>
+
+
+
+<div class="LFilme">
+
+<div id=film>
+<button onclick="window.location.href='intent://disneyplus.com/de-de/movies/mickys-weihnachts-erzahlung/7522gHd0GW3X#Intent;package=com.disney.disneyplus;scheme=disneyplus;end'">
+<p>
+Mickys<br>Weihnachts Erzählung
+</p>
+<img id="FCover" src="inc/bg/Filme/DisneyWeihnachten.jpg"></img>
+<p>
+<img src="inc/bg/disney-plus-1600.png"></img>
+</button>
+</div>
+
+<div id="film">
+<button onclick="window.location.href='intent://watch.amazon.de/watch?gti=amzn1.dv.gti.fcb63e69-600c-dcc3-0b75-60ba60f09e03'">
+<p>
+Wunder einer<br>Winternacht
+</p>
+<img id="FCover" src="inc/bg/Filme/WunderEinerWeihnacht.jpg"></img>
+<p>
+<img src="inc/bg/amazon-prime-video-1600.png"></img>
+</button>
+</div>
+
+<!--
+<div id="film">
+<button onclick="window.location.href='intent://disneyplus.com/de-de/movies/mickys-weihnachts-erzahlung/7522gHd0GW3X#Intent;package=com.disney.disneyplus;scheme=disneyplus;end'">
+<p>
+<span>Mickys<br>Weihnachts Erzählung</span>
+</p>
+<img id="FCover" src="inc/bg/Filme/DisneyWeihnachten.jpeg"></img>
+<p>
+<img src="inc/bg/disney-plus.png"></img>
+</p>
+</button>
+</div>    -->
+
+</div>
+
+
+
+
+<!--
+
+https://icons8.de/icons
+
+https://app.urlgeni.us/
+
+<div class="pList">
+<button onclick="window.location.href='###';"><img src="inc/bg/###.png"></img><span>Test</span></button>
+</div>
+-->

tab/home.php

@@ -63,11 +63,11 @@
     }
 
     console.log(images);
-    var deadline = new Date("Dec1, 2023 00:00").getTime();
-    var advent1 = new Date("2023-12-03");
-    var advent2 = new Date("2023-12-10");
-    var advent3 = new Date("2023-12-17");
-    var advent4 = new Date("2023-12-24");
+    var deadline = new Date("Dec1, 2022 00:00").getTime();
+    var advent1 = new Date("2022-11-27");
+    var advent2 = new Date("2022-12-04");
+    var advent3 = new Date("2022-12-11");
+    var advent4 = new Date("2022-12-18");
     if(advent1.getTime()<=getNow().getTime()) {
         $("#kerze1").show();
     }
@@ -128,6 +128,4 @@
 
 <p>
 
-<?php /*include ("kalender.php")*/ ?>
-
-<?php include ("radio.php") ?>
+<?php include ("kalender.php") ?>

tab/kalender.php

@@ -154,11 +154,43 @@
 			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"
+	];
 		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("Tür "+n);
 			parent.find("a").attr("href","?tab=tuer&nr="+n);

tab/nav2.php

@@ -1,7 +1,7 @@
 <section class="navigation">
   <div class="nav-container">
     <div class="brand">
-      <a href="#!">Mellys Weihnachts Kalender</a>
+      <a href="#!">Mellys Verhexster Kalender</a>
     </div>
     <nav>
       <div class="nav-mobile"><a id="nav-toggle" href="#!"><span></span></a></div>
@@ -16,6 +16,12 @@
             <a href="?tab=radio" <?php if ($tab == "radio")?>>Musik</a>
         </li>
         <li>
+            <a href="?tab=filme" <?php if ($tab == "radio")?>>Filme</a>
+        </li>
+        <li>
+            <a href="?tab=rezepte" <?php if ($tab == "rezepte")?>>Rezepte</a>
+        </li>
+        <!--li>
           <a href="#!">Services</a>
           <ul class="nav-dropdown">
             <li>
@@ -28,21 +34,7 @@
               <a href="#!">Graphic Design</a>
             </li>
           </ul>
-        </li>
-        <li>
-          <a href="#!">Portfolio</a>
-          <ul class="nav-dropdown">
-            <li>
-              <a href="#!">Web Design</a>
-            </li>
-            <li>
-              <a href="#!">Web Development</a>
-            </li>
-            <li>
-              <a href="#!">Graphic Design</a>
-            </li>
-          </ul>
-        </li>
+        </li-->
       </ul>
     </nav>
   </div>

tab/radio.php

@@ -13,6 +13,9 @@
 <div class="pList">
 <button onclick="window.location.href='spotify://playlist/37i9dQZF1DX1LCddwjCqDK';"><img src="inc/bg/spotify.png"></img><div>Weihnachtsklassiker</div></button>
 </div>
+
+<!--  -->
+
 <div class="üList">Bibi Blocksberg</div>
 <div class="pList">
 <button onclick="window.location.href='spotify://album/3sueFjrg3Vc2uVeojaWaHs';"><img src="inc/bg/spotify.png"></img><span>erzählt: Schneegeschichten</span></button>
@@ -35,6 +38,12 @@
 <div class="pList">
 <button onclick="window.location.href='spotify://album/5ju4E5z2e8haWhNVI6jvah';"><img src="inc/bg/spotify.png"></img><span>F38 Die Weihnachtsmänner</span></button>
 </div>
+<div class="pList">
+<button onclick="window.location.href='spotify://album/7vja0onvZ7y5YjHqzb99ro';"><img src="inc/bg/spotify.png"></img><span>F145 Etwas andere Weihnachten</span></button>
+</div>
+
+<!--  -->
+
 <div class="üList">Benjamin Blümchen</div>
 <div class="pList">
 <button onclick="window.location.href='spotify://album/306zG4cWQdfxopt4L69GVJ';"><img src="inc/bg/spotify.png"></img><span>Zoo Lieder, Fröhliche Weihnachten</span></button>
@@ -63,6 +72,9 @@
 <div class="pList">
 <button onclick="window.location.href='spotify://album/4WX50nu0FmuaXhcOD11KJt';"><img src="inc/bg/spotify.png"></img><span>F17 Der Der Skiurlaub</span></button>
 </div>
+
+<!--  -->
+
 <div class="üList">Bibi & Tina</div>
 <div class="pList">
 <button onclick="window.location.href='spotify://album/3GeZ0WBoN8yUrgQuR70jN7';"><img src="inc/bg/spotify.png"></img><span>F84 Der Weihnachtsmark</span></button>
@@ -76,4 +88,3 @@
 <div class="pList">
 <button onclick="window.location.href='spotify://album/2nluWK5OuZZBykDPfTOg4Q';"><img src="inc/bg/spotify.png"></img><span>F25 Das Weihnachtsfest</span></button>
 </div>
-

tab/rezepte.php

@@ -0,0 +1,10 @@
+<div class="titel">
+<img src="inc/bg/1609858275128.png"></img>
+<h3>Rezepte</h3>
+</div>
+
+<div class="neu">
+<p>Hier entsteht ein neuer Tab </p>
+</div>
+<p></p
+

tab/tuer.php

@@ -2,7 +2,7 @@
 <?php
 $nr = $_GET["nr"];
 
-$tag = strtotime($nr." December 2021");
+$tag = strtotime($nr." December 2022");
 if(isset($_GET["debug"])) {
     $now = strtotime($_GET["debug"]);
 } else {
@@ -18,251 +18,715 @@ if($now<$tag) {
 switch ($nr) {
     case 1:
     echo('<div id="txt"><h3>Tag 1</h3>
-    <p>
-Lange musstest du warten und heute ist es endlich so weit und das Warten hat ein Ende. <p> Die folter der Zeit, will ich nun Benden und direkt mit der ersten Tür anfangen, dein Rücken wird sich freuen. <p> Um es zu finden muss du nach Oben ins Offene Zimmer gehen.
-    </p>
-        </div>');
+<p>
+  <u>Bibi:</u>
+<br>
+  Hallo Meely, so schnell ging das Jahr rum und nun ist es endlich soweit und ich freue mich dich durch dein Kalender zu begleiten und freue mich das du dabei bist.
+<p>
+  Ene mene Pfanenwender starte los du Adwenskalende.
+<br>
+  HexHex!
+<p>
+  Oh sehe da das Erste Türchen Öffnet sich sogar schon und es ist ein schall, Bohr ist der Hübsch. Damit siehst du echt super aus.
+</p>
+<img src="src/images/bibi/introBibi.png"</img>
+</div>');
 break;
     case 2:
 echo('<div id="txt"><h3>Tag 2</h3>
-    <p>
-    Der Kalte Winter ist manchmal so kalt das man die Finger und Hände nicht bewegen kann und nur ein Glühwein helfen kann aber was machen wenn die finger vor zittern einen erstarren Lässt? <p>Deshalb gibt es heute was Warmes für die Hände und ein paar Vitamine zur Kalten Jahreszeit. <p> Zu finden ist es im Flur damit es die Hände beim rausgehen warm haben.
-    </p>
-
-        </div>');
+<p id="bibi">
+  <u>Bibi (Erzählung):</u>
+<br>
+  Hallo Meely wir sind immer noch bei mir zu Hause und der Tag geht weiter aber hören wir mal weiter rein oder?
+</p>
+<p>
+  <u>Bernhard:</u>
+<br>
+  bibi bei uns wird nicht gehäckst und besonderes keine Geschenke, das weiß du doch.
+<p>
+  <u>Bibi:</u>
+<br>
+  Aber Papi das doch Meely meine Beste Freundin.
+<p>
+  <u>Bernhard:</u>
+<br>
+  Ich habe was schönes für sie und zwar eine Mütze damit sie es am Kopf schön warm hat und das ganz ohne Gehäxse.
+<p>
+  <u>Bibi:</u>
+<br>
+  So eine schöne Mütze hätte ich nie Häxsen könne, Papi hat immer die besten Ideen.
+</p>
+<img src="src/images/bibi/introBibi.png"</img>
+</div>');
 break;
     case 3:
 echo('<div id="txt"><h3>Tag 3</h3>
-    <p>
-     Ein Spaß für Groß und Klein, das Baden. Seifen blasen wie reinste Magie, ein Spaß und doch eine Wohltat.<p> Mit dem richtigen Bade zusatz macht Baden erst zu Oase der Ruhe aber auch eine Oase des Spielen und dafür gibt es heute was für Große und Kleine Fans und der Co Vorleser list dir was vor, eine Kugel zum Wellness und ein Wein dazu, genau das richtige für die Kalten Tage um sich wider aufzuwärmen. <p> Der Perfekte Ort ist? in der Badewanne. <p>
+<p id="bibi">
+  <u>Bibi (Erzählung):</u>
+<br>
+  Papi mal wieder, zum Glück kommt Mami bald vom Einkaufen zurück.
+<p/>
+<p>
+  <u>Babara:</u>
+<br>
+  Hallo Melly, da bist du ja schon Bibilein, wahr schon ganz aufgeregt.
+<p>
+  <u>Bibi:</u>
+<br>
+  Ach Mami habe mich halt Gefreut das sie kommt und endlich da ist.
+<p>
+  <u>Babara:</u>
+<br>
+  Ist das so? Du hast ja ganz kalte Hände, Hier sind ein Paar Handwärmer für dich.
+<p>
+  Ene mene Schwärmer ein Paar Hanwärner her
+<br>
+  HexHex!
+<p>
+  <u>Bernhard:</u>
+<br>
+  Ach Babara es wird zu Weihnachten doch nicht Gehäxst und allgemein auch nicht.
+<p>
+  <u>Bibi:</u>
+<br>
+  Aber Papi das doch Für Melly
     </p>
-
-        </div>');
+<img src="src/images/bibi/introBibi.png"</img>
+</div>');
 break;
     case 4:
 echo('<div id="txt"><h3>Tag 4</h3>
-    <p>
-    Mit das Wichtigste Utensiel einer Frau ist die Handtasche, ein Utensiel der Geheimnisse für Männer inne Wohnt und so mansche verborgenen Schätze und Erinnerungen mögen dort verbringen.<p> Und doch findet man an in den kleinsten Ecken Staub und Sand. Den wollen wir Heute an den Kragen gehen, deswegen gibt es was für deine Handtasche. <p> Der Ort liegt denke ich mal auf der Hand oder eher auf der Handtasche.
-    </p>
-
-    </div>');
+<p>
+  <u>Bibi:</u>
+<br>
+  Papi mal wider, aber oh warte mal es klingelt an der Tür.
+<p>
+  <u>Frau Kolumna:</u>
+<br>
+  Hali hallo, Bibi ich habe eine Sensation gehört, Hahaha. deine Beste freundin ist da, Hahahaha. Das ist ja Sensationell.
+<p>
+  Schnell mal ein Foto von euch machen Hahaha.
+  Das kommt noch heute in die Abend Zeitung.
+<p>
+  Achja ich habe ja noch was für Melly von der Redaktion und zwar ein Schneeman mit Licht.
+<br>
+  Ich muss dan auch mal wider, Tchüselchen.
+<p>
+  <u>Bibi:</u>
+<br>
+  Du bist ja jetzt schon eine Kleine Berühmtheit Melly
+</p>
+<img src="src/images/bibi/introBibi.png"</img>
+</div>');
 break;
     case 5:
 echo('<div id="txt"><h3>Tag 5</h3>
-    <p>
-    Ein Handwärmer ist vielleicht zu wenig, da man ja 2 Hände hat mit 2 Tachen, da ist einer für beide Hände zu wenig, besonders wenn mann es in der Tasche hat, da friert ja die eine Hand &#128561;. <p> das geht natürlich nicht und deswegen gibt es heute noch einen, für die abdere Hand. Damit es beide Hände warm haben. <p> Finden tust du es neben der Schlafzimmer Tür auf der Treppe. <p>
-
-    Ps: Morgen kommt der Nikolaus, sind den alle Stifel Geputzt? Steht die Milch und das Gebäck bereit?
-    </p>
-
-    </div>');
+<p>
+  <u>Bibi:</u>
+<br>
+  Hört du das Melly? Das ist doch der Besen von Zickia, was will die den hier?
+<p>
+  <u>Zickia:</u>
+<br>
+  Hallo Bibi ist deine Mutter da habe da was in mein Hexbuch gefunden das muss ich ihr zeigen sie ist ja auch nicht mehr die jüngsten.
+<p>
+  <u>Bibi:</u>
+<br>
+  Ja sie müsste in Ihren Labor sein.
+<p id="bibi">
+  <u>Bibi (Erzählung):</u>
+<br>
+  Nach einer Kurzen Weile Kamm Zickia denn wider und ich fragte sie was sie von ihr wolle.
+</p>
+<p>
+  <u>Zickia:</u>
+<br>
+  Naja irgendwann kommst du auch mal in den alter dann wirst du an mich denken.
+<p>
+  Ene mene Leiddaden, Badesalz zum Baden.
+Ene mene Baske, Die Maske fürs Gesicht.
+<br>
+  HexHex, HexHex
+<p>
+  Du kannst ja deiner Freundin was abgeben davon.
+<p>
+  <u>Bibi:</u>
+<br>
+  oh danke das aber ist aber nett von dir Zickia.
+</p>
+<img src="src/images/bibi/introBibi.png"</img>
+</div>');
 break;
     case 6:
 echo('<div id="txt"><h3>Tag 6</h3>
-    <p>
-    Wahrst du den immer Artig? sind die stiffel geputz?<p>Ja Ja.. Die stiffel sehen schon mal gut aus, ahhh was heben wir denn hier feines, eine kleine Stärkung für mich, das freut mich sehr.., da gibt schon mal ein Plus Punkt aber wie sieht es mit dir aus mein Liebes Kind? <p>
-    
-    Ein blick in mein Buch wird es mir Verraten... <br>wo haben wir dich denn... L.. Lü ..Lüthje<br>ah da bist du ja. <p> Das sieht doch alles wunder Bahr aus und das soll belohnt werden und als dank für Trank uns Speisen gibt es was oben drauf.<p>
-    
-    Die heutige Tüt liegt natürlich bei deinen Schuhen.
-    </p>
-
-    </div>');
+<p id="bibi">
+  <u>Bibi (Erzählung):</u>
+<br>
+  Nach dem Zickia und Mami noch ein Tee trinken in der Küche haben wir uns Entschlossen ein Schaufenster Bummel zu machen, der jedoch auch nicht glatt lief.
+</p>
+<p>
+  <u>Bibi:</u>
+<br>
+  Oh guck mal Melly das sieht ja interessant und teuer aus der Laden hier, wollen wir da mal reinbgehen und guxken? aber guck mal das ist doch Coriosos der Kakadu von Malicia?
+<p>
+  <u>Malicia:</u>
+<br>
+  Loss Coriosos, das Parfüm müssen wir unbedingt haben, damit werden die Hexsen neidisch sein auf mich. Verlier das nicht, sonst Hexe ich dich in ein Froch.
+<p>
+  <u>Coriosos:</u>
+<br>
+  Cristina Aquilera ahhh, Cristina aquilera ahhh
+<p>
+  <u>Bibi:</u>
+<br>
+  Sieh Melly Sie wollen das Parfüm stehlen das müssen wir verhindern.
+<p>
+ Ene mene Valerie, das Parfüm in Mellys Hand
+<br>
+  HexHex!
+<p>
+  <u>Malicia:</u>
+<br>
+  Mist Immer diese Bibi, los Coriosos holl das zurück. Das darf uns nicht durch Die Lappen gehen.
+<p id="bibi">
+  <u>Bibi (Erzählung):</u>
+<br>
+  Nach 2,3 HexHex Austausch hat Malicia aufgegeben und hat das weite Gesucht. Zur deiner Freude hat sie er dir überlassen aber die im kauf haus wollten es nicht wider haben Und somit dir Geschenkt.
+<br>
+  Anschließend wahren wir ein Heißen Kakao Trinken auf den Schock.
+</p>
+<img src="src/images/bibi/introBibi.png"</img>
+</div>');
 break;
     case 7:
 echo('<div id="txt"><h3>Tag 7</h3>
-    <p>
-    Notizen und Ideen sind was wichtiges im Leben, für Alltag, aber auch für die Arbeit und deswegen gibt es heute ein Kleinen Block für dich und ein Stift dessen Tinte Radirbahr ist.<p>
-    
-    Siehe auf dem Stuben Tisch nach ob du dort deine Tür Findest.
-    </p>
-
-    </div>');
+<p id="bibi">
+  <u>Bibi (Erzählung):</u>
+<br>
+  Während wir unser Heißen Kakao genießen kamm auf einmal Moni zu uns 
+</p>
+<p>
+   <u>Moni:</u>
+<br>
+  Hallo Bibi und Melly, darf ich mich zu euch setzen? 
+<p>
+  <u>Bibi:</u>
+<br>
+  Kar gerne. Möchtes du auch ein Heißen Kakao aber was machst du hier Moni?
+<p>
+  <u>Moni:</u>
+<br>
+  wahr bis eben Weihnachtes Geschenke Schoppen und habe da was cooles gefunden für Melly und zwar Bade Schaum mit extra Scham. Dachte mir das ist vielleicht was für dich?.
+</p>
+<img src="src/images/bibi/introBibi.png"</img>
+</div>');
 break;
     case 8:
 echo('<div id="txt"><h3>Tag 8</h3>
-    <p>
-    2 Handwärmer sind wenn es kalt ist vielleicht zu wenig, wenn man sie wirklich braucht an kalten Tagen und keiner sie wieder fit macht.<p> Denn wir wissen ja Tobi und Jason sind nicht die schnellsten, bei den einen Dauert es ein halbes Jahr und bei den anderen 3 Monate &#128517; und bevor es zu Kalt duch den Winder geht, gibt es heute Ersatz für dich.<p>
-    
-    Nicht der bester Ort Aber auf der Treppe Richtung Dachterrasse wirst du Fündig.
-    </p>
-
-    </div>');
+<p id="bibi">
+  <u>Bibi (Erzählung):</u>
+<br>
+  Nach dem wir unser 2ten Kakao mit Moni getrunken haben, kamm später noch Florian vorbei und wahr sich ein Neues Spiel Kaufen.
+</p>
+<p>
+  <u>Florian:</u>
+<br>
+  Hallo Bibi, Moni und Melly, das ja ein Zufall das ich euch alle hier Treffe.
+<p>
+  <u>Alle Zusammen:</u>
+<br>
+  Hallo Florian
+<p>
+  <u>Moni:</u>
+<br>
+  was machst du hier?
+<p>
+  <u>Florian:</u>
+<br>
+  Habe mir ein Brandneues Spiel Gehollt und ihr?
+<p>
+  <u>Bibi:</u>
+<br>
+  Wollten Schoppen und wahren dann Kakao trinken.
+<p>
+  <u>Florian:</u>
+<br>
+  Ich Kombeniere, ihr habt euch zufällig getroffen da ihr Schoppen wolltet und ein Mädels tag machen wolltet aber da ich weiß das Melly gerne mal was Isotoniches Trinkt habe ich hier was für sie, eine Flache ISO für den Soda screen.
+</p>
+<img src="src/images/bibi/introBibi.png"</img>
+</div>');
 break;
     case 9:
 echo('<div id="txt"><h3>Tag 9</h3>
-    <p>
-    Wenn es draußen zu Kalt ist vergisst man vielleicht einige Stellen sie ein zu Cremen und es vor dem Austrocknen zu schützen. <p> Wie die Lippen und damit sie es im Winnter Gut haben und und nicht Austrocknen gib es nun was feines für sie, natürlich kann man es auch in sommer oder nach dem Duchen benutzen. <p>
-    
-    Deine Lippen finden es im Großen Bade Zimmer.
-    </p>
-
+<p id="bibi">
+  <u>Bibi (Erzählung):</u>
+<br>
+  Nach dem wir mir Florian und Moni noch ein schönen Nachmittag hatten, sind wir als die Sonne untergegangen ist wider zu mir gegangen wo schon der Nächste Besuch auf uns wartete.
+</p>
+<p>
+  <u>Oma Grete:</u>
+<br>
+  Nah ich beiden wo kommt ihr denn Herr ihr seit ja komplett unterkühlt, da schaffe ich mal Abhilfe
+<p>
+  Ene mene Nachtschwärmer, ein Paar Handwärmer
+<br>
+  HexHex!
+<p>
+  So jetzt werden die Hände wider schön warm.
+<p id="bibi">
+  <u>Bibi (Erzählung):</u>
+<br>
+  Nach dem wir noch ein Warmen kakao getrunken haben um uns wider aufzuwärmen, kommen wir auf die das du bei mir ein Parr Tage Übernachtest und da es schon so dunkel wahr hatten meine Elten nichts dagegen.
+</p>
+<p>
+  <u>Oma Grete:</u>
+<br>
+  oh die Melly Schläft heute Hier? Dann habe ich hier noch ein Kleines Pixi Buch für Sie damit Ihr Eine schöne gute Nacht Geschichte haben heute.
+</p>
+<img src="src/images/bibi/introBibi.png"</img>
     </div>');
 break;
     case 10:
-    echo('<div id="txt"><h3>Tag 10</h3>
-    <p>
-    Heute gibt es Schneei nicht nur als Kuscheltier für das Bett..., aber mehr dazu wirst du sicher gleich sehen wenn du die Box öffnest...<p> Wenn du kannst und möchtest gönne dir mal was schönes und nim ein Bad, lasse dich von Einer Bibi Zauber Kugel verzaubern und verwöhnen und wenn du lieb fragst gibt es vielleicht im Kerzenlicht eine Weihnachts Geschichte vorgelesen<p> Dieses geht natürlich wann immer du möchtest Und die Zeit dadür ist.<p>
+echo('<div id="txt"><h3>Tag 10</h3>
+<p id="bibi">
+  <u>Bibi (Erzählung):</u>
+<br>
+  Nach dem wir zu Abend Gegessen haben, es gab natürlich mein Lieblings Gericht bekamen wir noch Unerhoft an der Tür.
+</p>
+<p>
+  <u>Babara:</u>
+<br>
+  Bibi es klingelt an der Tür, machst du auf?.
+<p>
+  <u>Bibi:</u>
+<br>
+  Ja mache ich Mami, oh Marita was machst du noch um die Zeit hier?
+<p>
+ <u>Marita:</u>
+<br>
+  Hallo Bibi Wollte Melly eine Body Creme vorbei bringen, die besonderes gut Richt und die wird ihr bestimmt gefallen. 
+<p>
+  Und ich dachte sie kann bald wider Haargumis benutzen und da habe ich gute gefunden, Die Bestimmung super gut sind.
     
-    Damit dein Verwöhn Abend wahr wird muss du nur in die Bade Wanne gucken.
-    </p>
-
-    </div>');
+</p>
+<img src="src/images/bibi/introBibi.png"</img>
+</div>');
 break;
     case 11:
 echo('<div id="txt"><h3>Tag 11</h3>
-    <p>
-    Nicht nur die Lippen brauchen Pflege wenn es kalt ist man sollte auch stets auf sein Gesicht und Hände achten das die bei der Kälte nicht austrocknen. <p> auch ideal für unterwegs und für den Urlaub.<p>
-    
-    Ganz oben auf der Treppe wirst du fündig werden.
-    </p>
-
-    </div>');
+<p id="bibi">
+  <u>Bibi (Erzählung):</u>
+<br>
+  Kaum Lagen wir im Bett und haben uns gegenseitig das Pixi Buch vorgelesen. Hörten Wir auf ein Mal ein Risen krach auf dem Dach.
+</p>
+<p>
+  <u>Bibi:</u>
+<br>
+  Was wahr das? Ich gucke mal aus dem Fenster ob ich was sehen kann. Eddi was machst du den hier?
+<p>
+  <u>Eddi Eddi Eddison:</u>
+<br>
+  Guten Abend Bibi, habe ne neue Erfindung gemacht die wollte ich noch heute Testen, damit kann man fliegen und Kichen Gleichzeitig aber irgendwie scheint das noch nicht zu Klappen.
+<p>
+  oh ich sehe du hast besuch?
+<p>
+  <u>Bibi:</u>
+<br>
+  Ja das Melly aus Norderstedt, sie Übernachtet heute hier.
+<p>
+  <u>Eddi Eddi Eddison:</u>
+<br>
+  Das ja interessant, Das ist doch in der Nähe von Hamburg oder?
+<p>
+  Echt schade das meine Erfindung noch nicht geht aber eines hat sie dennoch Geschafft. Hier habt ihr Garfild gewürzt ihr beiden.
+<p>
+  Ich mache mich dan mal wider auf dem Weg, Tschüss ihr beiden.
+</p>
+<img src="src/images/bibi/introBibi.png"</img>
+</div>');
 break;
     case 12:
 echo('<div id="txt"><h3>Tag 12</h3>
-    <p>
-    Ei Ei Ei was sehe ich da, ein gekochtes Ei. Schale Ab, noch ein Hab dann ist das Ei leider weg. <p>
-    
-    Zum Glück kann man immer neue machen aber weil Eier so gut smecken und du sie gerne Isst gibt was schönes für deine Frühstücks Eier.
-    <p>
-    Schaue neben dem Kühlschrank.
-    </p>
-
-    </div>');
+<p id="bibi">
+  <u>Bibi (Erzählung):</u>
+<br>
+  Nach dem wir den eingeschlafen sind und uns mal so richtig ausgeschlafen haben nach dem stres von gestern , hatten wir noch das Frühstück vorbereitet und alle zusammen gefrühstückt.
+</p>
+<p>
+  <u>Bibi:</u>
+<br>
+  Was Hältst du davon wenn wir zusammen nach Prof. Hagelkorn gehen? Er kann uns Bestimmt sagen wie sas Wetter zu Weihnachten wird.
+<p id="bibi">
+  <u>Bibi (Erzählung):</u>
+<br>
+  Der Vorschlag hat dir direkt gefallen und nach dem wir mit dem Frühstück fertig Wahren haben wir uns angezogen und haben uns auf dem Weg gemacht, Natürlich Kannte er dich schon Aus der Zeitung und von Frau Kolumna.
+</p>
+<p>
+  <u>Prof. Hagelkorn:</u>
+<br>
+  Hallo Bibi und Melly schön das ihr da seit. Wie kann ich euch Helfen.
+<p>
+  <u>Bibi:</u>
+<br>
+  Wir wollten wissen wie das Wetter am Weihnachten wird und hofften das du uns das sagen kannst.
+<p>
+  <u>Prof. Hagelkorn:</u>
+<br>
+  Das ist schwer zu sagen dafür ist es noch ein wenig Früh aber das wir weiße Weihnachten haben werden sieht nicht gut aus.
+<p>  
+  <u>Bibi:</u>
+<br>
+  Oh das aber Schade aber da kann man wohl nichts machen denn.
+<p>
+  <u>Prof. Hagelkorn:</u>
+<br>
+  vielleicht haben wir ja noch Glück, kann ja alles noch passieren. Ach Melly wisst ihr denn schon was ihr zu Weihnachten ist? Hier habe ich was super Leckeres gefunden für Hähnchenfleisch.
+</p>
+<img src="src/images/bibi/introBibi.png"</img>
+</div>');
 break;
     case 13:
 echo('<div id="txt"><h3>Tag 13</h3>
-    <p>
-    Leider Kann nicht immer Zeit für Wein sein aber wenn ein Abend oder Moment gekommen ist, wird dich der Untersetzer begleiten und die Erste Flache Wein zum einweihen gibt es dazu.<p>
-    
-    Es im Schrank zu verstecken wehre blöd dachte ich mir aber der Esstisch ist genau so gut.
-    </p>
-
-    </div>');
+<p id="bibi">
+  <u>Bibi (Erzählung):</u>
+<br>
+  Nach dem wir uns alles überlegt haben was wir alles schönes mit dem gewürzt machen können, kamm aufeinmal Runzia über uns geflogen und hat uns tierisch Erschreckt.
+</p>
+<p>
+  <u>Runzia:</u>
+<br>
+  Hallo Bibi, habe ich euch Erschreckt?
+<p>
+  <u>Bibi:</u>
+<br>
+  Ja das hast du, Wo möchtest du den so eilig hin?
+<p>
+  <u>Runzia:</u>
+<br>
+  Bin Gerade auf dem weg nach Marnia ihr was zeigen was ich in mein alten Bücher Gefunen habe. Würdest du deiner mutter auch was abgeben? dann sieht sie mal alte Hext Kunst.
+<p>
+  Ene mene Salzgebäck, für euch beide Bade salz und Tee in die hand.
+<br>
+  HexHex!
+<p>
+  <u>Bibi:</u>
+<br>
+  Klar mache ich gerne.
+</p>
+<img src="src/images/bibi/introBibi.png"</img>
+</div>');
 break;
     case 14:
     echo('<div id="txt"><h3>Tag 14</h3>
-        <p>
-        Was süßes für meine Süße? süß bist nur du allein aber was feines für den Gaumen so dachte ich, ist auch mal was schönes.<p>
-        Der beste Ort dafür ist der Frühstücks Tisch.
-        </p>
-    
+<p id="bibi">
+  <u>Bibi (Erzählung):</u>
+<br>
+  Als wir wieder bei mir zuhause angekommen sind, sahen wir Herr Klappermann wie er die Briefe verteilte.
+</p>
+<p>
+  <u>Bibi:</u>
+<br>
+  Hallo Herr Klappermann, wie geht es Ihnen?
+<p>
+  <u>Herr Klappermann:</u>
+<br>
+  Hallo Bibi, mir geht es gut und euch?
+<p>
+  <u>Bibi:</u>
+<br>
+  uns geht es gut danke hast du post für mich?
+<p>
+  <u>Herr Klappermann:</u>
+<br>
+  Ja ein Brief habe ich für dich der ist vom Martinshoff.
+<p>
+  <u>Bibi:</u>
+<br>
+  Der ist bestimmt von Tina, Juhu.
+<p>
+  <u>Herr Klappermann:</u>
+<br>
+  Für deine Freundin habe ich natürlich auch was damit sie nicht leer aus geht und es ist ja Bald Weihnachten.
+</p>
+<img src="src/images/bibi/introBibi.png"</img>
         </div>');
 break;
     case 15:
 echo('<div id="txt"><h3>Tag 15</h3>
-    <p>
-    Manchmal hat man so viele Ideen das auf keine Kuh Haut passt oder man hat es in der Anderen Tasche Vergessen und deswegen gibt es noch ein Ideen Block und ein Stift für dich<p>
-    Unten auf der Treppe wirst du deine Tür finden.
-    </p>
-
+<p>
+<p id="bibi">
+  <u>Bibi (Erzählung):</u>
+<br>
+  Herr Klappermann hatte auch ein Brief für meine Eltern gehabt, erst dachte ich Auwaia da kommt nichts gutes aber zum Glück wahr das nur eine Einladung das Heute Abend eine Schul Feier stattfindet und Elten so wie Gäste gerne gesehen sind.
+</p>
+<p>
+  <u>Bibi:</u>
+<br>
+  Oh mann ich freue mich schon so sehr auf die Feier in der Schule das wird bestimmt lustig.
+<p>
+  <u>Bernhard:</u>
+<br>
+  Das du mir da ja kein Unsin machst und Bibi?
+<p>
+  <u>Bibi:</u>
+<br>
+  Ja ich weiß, Absolutes Hexs Verbot es sei den es ist ein Notfall.
+<p>
+  <u>Bernhard:</u>
+<br>
+  Genau richtig am Liebsten Garnicht Hexsen.
+<p>
+  <u>Frau Mueller-Riebensehl:</u>
+<br>
+  Ah die Blocksbergs, das ist ja schön das ich sie hier sehe und ein Gast Habt ihr auch Mit genommen, wie heißt sie denn?
+<p>
+  <u>Bibi:</u>
+<br>
+  Das ist die Melanie und Kommt aus Norderstedt und ist zu Besuch bei mir.
+<p>
+  <u>Frau Mueller-Riebensehl:</u>
+<br>
+  Das ist ja nett ist denn auch eine Hexe wie du?
+<p>
+  <u>Bibi:</u>
+<br>
+  nee sie ganz normal.
+<p>
+  <u>Frau Mueller-Riebensehl:</u>
+<br>
+  Dann ist ja gut, dann bekommt sie von mir eine Selbstgemachte Kerze.
+</p>
+<img src="src/images/bibi/introBibi.png"</img>
     </div>');
 break;
     case 16:
 echo('<div id="txt"><h3>Tag 16</h3>
-    <p>
-    Heute gibt es wider den Advent Türchen Kassen Schlager und Vielleicht sollte man an Kalten Tagen, davon nie genug haben und immer welche bereit halten, ob in der Jacke oder Tasche damit die Hände nicht Frieren und immer Welche dabei hat.<p>
-    Nun denke ich auch das du genug davon hast so das du immer warme Hände an kalten Tagen hast<p>
-    Finden kannst du es unten vor der Terrassen Tür.
-    </p>
-
+<p>
+<p id="bibi">
+  <u>Bibi (Erzählung):</u>
+<br>
+  Die Schull Feier wahr ein foller Erfolg und mann hatten wir Spaß, wir haben gebastelt und an Spiele teil genommen aber spät Am Abend hatte ich ein Geräusch....
+</p>
+<p>
+  <u>Bibi:</u>
+<br>
+  Das ist doch Kakawasi was ich da draußen höre.
+<p>
+  <u>Schubia:</u>
+<br>
+  Blocksberg was geht den hier hab?
+<p>
+  <u>Bibi:</u>
+<br>
+  Eine schulfeier aber was machst du hier um dieses Uhrzeit?
+<p>
+  <u>Schubia:</u>
+<br>
+  Ach wahr gerade so in der Nähe und wollte dich besuchen kommen, ah Melly ist auch bei dir das ja voll Krass ey, ich was unglaubliches Enddeckt habe.
+<p>
+  Ene mene wohl, 2 Kohl gewürzt komme herbei.
+<br>
+  HexHex!
+<p>
+  <u>Bibi:</u>
+<br>
+  Was ist Das?
+<p>
+  <u>Schubia:</u>
+<br>
+  Bohr Blocksberg, Das ist ein gewürzt das ist mega krass das müsst ihr probieren.
+<p>
+  <u>Bibi:</u>
+<br>
+  cool danke Schubia werde das gleich meiner Mutter sagen das sie was damit Kochen soll.
+</p>
+<img src="src/images/bibi/introBibi.png"</img>
     </div>');
 break;
     case 17:
 echo('<div id="txt"><h3>Tag 17</h3>
-    <p>
-    Ei Ei Ei auf ein Ei kann mann nicht stehen und manschmal ist ein 2tes Ei besser als nur eins, damit es nicht wild durch den Tisch rollt gibt noch ein Eier becher zum Schutz. <p>
-    Gucke auf dem Frühstücks Tisch nach.
-    </p>
-
+<p>
+<p id="bibi">
+  <u>Bibi (Erzählung):</u>
+<br>
+  Als wir spät am Am Abend dann zu Hause wahren, sind wir ins Bett gefallen und sind sofort eingeschlafen, am Nächsten Morgen nach dem Frühstück, wollten wir noch mal auf dem Weihnachtsmarkt und uns da die Buden ansehen.
+</p>
+<p>
+  <u>Bibi:</u>
+<br>
+  Guck dir mal die ganzen schönen Buden an alle so schön Geschmückt.
+<p>
+  <u>Flauipaui:</u>
+<br>
+  Hallo Bibi, Hallo Melly
+<p>
+  <u>Bibi:</u>
+<br>
+  Hallo Flauipaui, schön dich hier zu sehen. Sind die Buden und Stände nicht wunderschön?
+<p>
+  <u>Flauipaui:</u>
+<br>
+  oh ja das sind sie, einfach traumhaft. Da vorne ist ein Stand der hat voll die Coolen Sachen.
+<p>
+  <u>Bibi:</u>
+<br>
+  Echt? was haben die den da so cooles?
+<p>
+  <u>Flauipaui:</u>
+<br>
+  Der Laden ist Richtig Hexsich, der hat magisches Salz für den Körper, Das lässt ein 1 Jahr jünger aussehen sagt sie.
+<p>
+  <u>Bibi:</u>
+<br>
+  Echt? Ist das denn auch eine Exe?
+<p>
+  <u>Flauipaui:</u>
+<br>
+  Ja, sie heißt Talis oder so
+<p>
+  <u>Bibi:</u>
+<br>
+  aha noch nie von ihr Gehört, irgendwie
+<p>
+  <u>Flauipaui:</u>
+<br>
+  Ich auch nicht aber sie wahr voll nett und hier Melly habe ich ein Paar Proben für dich.
+<p id="bibi">
+  <u>Bibi (Erzählung):</u>
+<br>
+  Während wir mit Flauipaui noch ein heißen Kakao Trinken und die Minus grade Erzählt sie noch ein wenig über Talis. Als wir dann fertig wahren sahen wir den Bürgermeister wie er den Tannenbaum am Rathaus begutachtete.
+</p>
+<p>
+</p>
+<img src="src/images/bibi/introBibi.png"</img>
     </div>');
 break;
     case 18:
 echo('<div id="txt"><h3>Tag 18</h3>
-    <p>
-    Die Wilde Kälte beansprucht das Gesicht sehr und deswegen gibt es heute eine Wellness Maske für das Gesicht, zum Energie und Feuchtigkeit sammeln damit es das Gesicht wider Stralen kann.<p>
-    Im Großen Bad ist denke ich mal der beste Ort dadür.
-    </p>
-
-    </div>');
+<p>
+  <u>Bürgermeister:</u>
+<br>
+  Ah, einfach überagen der Tannenbaum aber irgendwie passt da noch etwas nicht.
+<p>
+  <u>Bibi:</u>
+<br>
+   Hallo Herr Bürgermeister, Hallo!
+<p>
+  <u>Bürgermeister:</u>
+<br>
+  oh nein die Hat mir noch gefehlt, Bibi Blocksberg
+<p>
+  <u>Bibi:</u>
+<br>
+  Das ist ja ein schöner Tannenbaum aber was machen sie da?
+<p>
+  <u>Bürgermeister:</u>
+<br>
+  Hex ihn Bloß nicht Kaputt, der nur für meine Wähler aber irgendwie passt sa was nicht er sieht so unvollständig aus, als würde da was fehlen.
+<p id="bibi">
+  <u>Bibi (Erzählung):</u>
+<br>
+  Während wir uns mehere Menuten den Tannenbaum ansehen und wir nichts entdecken können Rufte der Herr Bürgermeister auf einmal seinen Sekretär Herr Pichler.
+</p>
+<p>
+  <u>Bürgermeister:</u>
+<br>
+  Pichler? Wo sind sie? Ich habe es gefunden was mich stört. Nie ist er da wenn mann ihn braucht. Alles muss man hier alleine machen.
+<p>
+  <u>Bibi:</u>
+<br>
+  Echt was gefällt ihnen denn nicht an den Baum? Soll ich ihnen ib die Hand Hexsen?
+<p>
+  <u>Bürgermeister:</u>
+<br>
+  Nein Bloß nicht, ich mache das lieber selber. 
+  Hier Melly das ist für dich und ich hoffe das du bei der Nächsten Wahl an mich denkst.
+</p>
+<img src="src/images/bibi/introBibi.png"</img>
+</div>');
 break;
     case 19:
 echo('<div id="txt"><h3>Tag 19</h3>
     <p>
-    Fals der Wellness Tag gestern nicht geklappt hat dadür heute vielleicht und dazu gibt es Bade Spaß dazu, für eine noch größere Entspannung und was kleines Süßes für die Seele.<p>
-    Siehe in die Badewanne nach.
-    </p>
+    
+##### schneei Salz Pfeffer / Pichler
 
+    </p>
+    <img src="src/images/bibi/introBibi.png"</img>
     </div>');
 break;
     case 20:
 echo('<div id="txt"><h3>Tag 20</h3>
     <p>
-    Noch 4 Tage dann ist es so weit und der Rote Mann Steht vor der Tür. Um perfekt aus zusehen gibt es Heute noch mal eine Gesicht Maske für den Großen Tag.<p>
-    Auf der Treppe nach oben liegt deine Tür für heute.
-    </p>
+    
+##### Engel und Avocado / Arkadia
 
+    </p>
+    <img src="src/images/bibi/introBibi.png"</img>
     </div>');
 break;
     case 21:
 echo('<div id="txt"><h3>Tag 21</h3>
     <p>
-    Für unterwegs oder für den großen Tag, ein Utensiel was man täglich braucht und um sich Frich zu fühlen ist es das das Wichtigste.<p>
-    Bei uns Vorm Kleider Schrank.
-    </p>
+    
+##### joko Schokolade / Xenia
 
+    </p>
+    <img src="src/images/bibi/introBibi.png"</img>
     </div>');
 break;
     case 22:
 echo('<div id="txt"><h3>Tag 22</h3>
     <p>
-    Der Weihnachts Stess hinterlässt so seine Spuren und einiges kommt vielleicht zu kurz aber damit das Gesicht nicht Zu Trocken wird bei der Kälte für denn großen Tag oder die Zeit zu eng wird für eine Gesichts Maske gibt es Feuchtigkeit To Go fürs Gesicht und für alle Fälle.<p>Für ein strahlen was selbst schnee zu schmelzen bringt<p>
-    Im Gäste Bad findest du deine Heutige Tür.
-    </p>
+    
+##### duchgel / Walpurgia
 
+    </p>
+    <img src="src/images/bibi/introBibi.png"</img>
     </div>');
 break;
     case 23:
 echo('<div id="txt"><h3>Tag 23</h3>
     <p>
-    Ob für die Harre oder den Körper, für unterwegs ist es die Beste Größe und passt in jeder Culturtache ohne viel Platz zu verbrauchen, dein Duft für die Besonderen Momente.<p>
-    Finden tust du es da wo die Culturtachen liegen.
-    </p>
+    
+##### Kerze / Mania
 
+    </p>
+    <img src="src/images/bibi/introBibi.png"</img>
     </div>');
 break;
     case 24:
 echo('<div id="txt"><h3>Tag 24</h3>
     <p>
-    Ho Ho Ho, heute ist es soweit der Große Tag wo der Rote Mann mit weißen Bart uns besuchen kommt, von weit her kommt er und gepackt mit unseren Wünschen. <p>
-    Leider gibt es heute nur was Süßes da ja heute endlich der Tag gekommen ist und zahlreiche Geschenke auf uns warten.
-    </p>
+    
+##### parfüm  duchgel / Erzaehler
 
+    </p>
+    <img src="src/images/bibi/introBibi.png"</img>
     </div>');
 break;
-case schneei:
-echo('<div id="txt"><h3>Von Schneei</h3>
+case 25:
+echo('
+    <div class="schneei">
+    <img id="SRechts" src="inc/bg/schneeiRechts.png"</img>
+    <div id="txt"><h3>Von Schneei</h3>
+   
     <p>
-    Weinseminar Einsteiger für 2<p>
-    Geteilter Wein - doppelter Genuss!
-Geteilter Wein ist doppelter Genuss! Deshalb bringst du zum Weinseminar für zwei einen Freund, eine Freundin oder den Partner mit. Zusammen verköstigt ihr mit anderen Weinfreunden acht erlesene Tropfen und lernt unter der Leitung eines Profis verschiedene Rebsorten und deren geschmackliche Eigenheiten kennen. Am Schluss darf jeder von euch eine Flasche mit nach Hause nehmen.<p>
-Euch Erwartet:<p>
-Einsteiger-Weinseminar für 2<br>
-Verkostung von 8 hochwertigen Weinen<br>
-Einführung in die Weinsensorik<br>
-Zahlreiche Infos und Hintergrundwissen vom Wein-Profi<br>
-Je nach Standort: 2 Flaschen Wein zum Mitnehmen für jedes Paar.
-<p>
-Ich wünsche meine Beiden Lieblings Eltern viel Spaß und hoffe das Ihr ein Schönen Abend habt. <br> Euer Schneei
+    
+    text
+    
     </p>
-
+    
+    <img src="src/images/bibi/introBibi.png"</img>
+    </div>
     </div>');
 break;
 
 default:
-echo('<div id="txt"><h3>Falscher Tag</h3><span id="false">
-    Ah Ah Ah, nicht so voreilig. <br> Dieser Tag ist noch nicht an der Reihe !, <br> Du muss dich noch ein wenig Gedulden.  </span></div>');
+echo('<div id="txt"><h3>Falscher Tag</h3><p id="false">
+    Ah Ah Ah, nicht so voreilig. <br> Dieser Tag ist noch nicht an der Reihe !, <br> Du muss dich noch ein wenig Gedulden.  </p>
+    <img src="src/images/bibi/introBibi.png"</img>
+    </div>');
 break;
 }
     ?>