body angepasst, home seite weiter ausgebaut

css/style.css

@@ -1,2 +1,2 @@
-ul{list-style-type:none;margin:-2px auto;padding:0;background-color:rgba(255,255,255,0.8);border:2px solid darkred;display:inline-block;transition:all 60ms;box-shadow:inset -2px -2px 5px #add8e6,inset 2px 2px 5px #add8e6}ul.navUl{height:33px}li{float:left;width:auto;margin:0px 0px;border-radius:0px}li a{display:block;color:darkred;text-align:center;padding:7px 16px;text-decoration:none;margin:1px 0 4px;font-weight:bold}nav>ul>li{width:100px}li a:active,li a:hover,li a:focus,li a.active{background:none;color:red;text-decoration:underline}li a:active,li a:hover,li a:focus{transition:1s;transform:scale(1.1)}ul li ul li{display:inline-block}.submenu{visibility:hidden;position:relative;margin-top:-5px;margin-left:-10px;background-color:#fff}.submenu li{display:block;float:none;border-bottom:1px solid #daa520;margin:0 0 0 0}.submenu li a{display:block;float:none;border-bottom:1px solid #daa520;margin:0 0 0 0}.submenuActive{visibility:visible}nav>ul>li>ul>li{margin:middle}.home{margin-top:20px;color:red;font-size:30px;font-weight:bold}.home h1{margin-top:5px;color:blue;font-weight:normal;font-size:15px}body{text-align:center;background-image:url("../inc/bg/th.png");background-color:#c1ccff}header{margin:auto;background-image:url("../inc/bg/banner1.jpg");background-size:100%;background-repeat:no-repeat;overflow:hidden;margin-top:3px;border-color:darkred;border-width:3px;border-style:solid;text-align:center;padding:25px;box-shadow:-1px -1px 5px silver,1px 1px 5px silver}header h1{margin-left:80px;color:gold;text-decoration:underline;font-size:20px;font-weight:bold}
+ul{list-style-type:none;margin:-2px auto;padding:0;background-color:rgba(255,255,255,0.8);border:2px solid darkred;display:inline-block;transition:all 60ms;box-shadow:inset -2px -2px 10px #add8e6,inset 2px 2px 10px #add8e6}ul.navUl{height:33px}li{float:left;width:auto;margin:0px 0px;border-radius:0px}li a{display:block;color:darkred;text-align:center;padding:7px 16px;text-decoration:none;margin:1px 0 4px;font-weight:bold}nav>ul>li{width:100px}li a:active,li a:hover,li a:focus,li a.active{background:none;color:red;text-decoration:underline}li a:active,li a:hover,li a:focus{transition:1s;transform:scale(1.1)}ul li ul li{display:inline-block}.submenu{visibility:hidden;position:relative;margin-top:-5px;margin-left:-10px;background-color:#fff}.submenu li{display:block;float:none;border-bottom:1px solid #daa520;margin:0 0 0 0}.submenu li a{display:block;float:none;border-bottom:1px solid #daa520;margin:0 0 0 0}.submenuActive{visibility:visible}nav>ul>li>ul>li{margin:middle}.TimeContainer{margin-top:20px;color:#000}#clockdiv>div{display:inline-block}body{text-align:center;background-image:url("../inc/bg/simple-snowflake.png");background-size:20%}header{margin:auto;background-image:url("../inc/bg/christmas background.jpg");background-size:100%;background-position:0% 88%;background-repeat:no-repeat;overflow:hidden;margin-top:3px;border-color:darkred;border-width:3px;border-style:solid;text-align:center;padding:25px;box-shadow:-1px -1px 5px silver,1px 1px 5px silver}header h1{color:red;text-decoration:underline;font-size:30px;font-weight:bold}
 /*# sourceMappingURL=style.css.map */

css/style.css.map

@@ -1,6 +1,6 @@
 {
 "version": 3,
-"mappings": "AAAA,EAAE,CACA,eAAe,CAAE,IAAI,CACrB,MAAM,CAAE,SAAS,CACjB,OAAO,CAAE,CAAC,CAGV,gBAAgB,CAAE,qBAAsB,CACxC,MAAM,CAAE,iBAAiB,CACzB,OAAO,CAAE,YAAY,CACrB,UAAU,CAAE,QAAQ,CACpB,UAAU,CAAE,qDAA0D,CAEtE,QAAO,CACL,MAAM,CAAE,IAAI,CAEhB,EAAE,CACA,KAAK,CAAE,IAAI,CACX,KAAK,CAAE,IAAI,CAGX,MAAM,CAAE,OAAO,CAGf,aAAa,CAAE,GAAG,CAElB,IAAC,CACC,OAAO,CAAE,KAAK,CACd,KAAK,CAAE,OAAO,CACd,UAAU,CAAE,MAAM,CAClB,OAAO,CAAE,QAAQ,CACjB,eAAe,CAAE,IAAI,CACrB,MAAM,CAAE,SAAS,CACjB,WAAW,CAAE,IAAI,CAErB,SAAa,CACX,KAAK,CAAE,KAAK,CAGZ,6CAAoC,CAClC,UAAU,CAAE,IAAI,CAChB,KAAK,CAAE,GAAG,CACV,eAAe,CAAE,SAAS,CAE5B,iCAA0B,CACxB,UAAU,CAAE,EAAE,CACd,SAAS,CAAE,UAAU,CAEzB,WAAW,CACT,OAAO,CAAE,YAAY,CAEvB,QAAQ,CACN,UAAU,CAAE,MAAM,CAClB,QAAQ,CAAE,QAAQ,CAClB,UAAU,CAAE,IAAI,CAChB,WAAW,CAAE,KAAK,CAClB,gBAAgB,CAAE,IAAkB,CAEpC,WAAE,CAOA,OAAO,CAAE,KAAK,CACd,KAAK,CAAE,IAAI,CACX,aAAa,CAAE,iBAAmB,CAClC,MAAM,CAAE,OAAO,CATf,aAAC,CACC,OAAO,CAAE,KAAK,CACd,KAAK,CAAE,IAAI,CACX,aAAa,CAAE,iBAAmB,CAClC,MAAM,CAAE,OAAO,CAOrB,cAAc,CACZ,UAAU,CAAE,OAAO,CAErB,eAAuB,CACrB,MAAM,CAAE,MAAM,CCzEhB,KAAK,CACD,UAAU,CCDL,IAAI,CDET,KAAK,CAAE,GAAG,CACV,SAAS,CAAE,IAAI,CACf,WAAW,CAAE,IAAI,CAEjB,QAAE,CACE,UAAU,CCNT,GAAG,CDOJ,KAAK,CAAE,IAAI,CACX,WAAW,CAAE,MAAM,CACnB,SAAS,CAAE,IAAI,CCJvB,IAAI,CACA,UAAU,CAAE,MAAM,CAClB,gBAAgB,CAAE,uBAAuB,CACzC,gBAAgB,CAAE,OAAO,CAE7B,MAAM,CACF,MAAM,CAAE,IAAI,CAEZ,gBAAgB,CAAE,4BAA4B,CAC9C,eAAe,CAAE,IAAI,CACrB,iBAAiB,CAAE,SAAS,CAC5B,QAAQ,CAAE,MAAM,CAChB,UAAU,CAAE,GAAG,CACf,YAAY,CAAE,OAAO,CACrB,YAAY,CAAE,GAAG,CACjB,YAAY,CAAE,KAAK,CACnB,UAAU,CAAE,MAAM,CAClB,OAAO,CAAE,IAAI,CACb,UAAU,CAAE,uCAAwC,CAEpD,SAAE,CACE,WAAW,CAAE,IAAI,CACjB,KAAK,CAAE,IAAI,CACX,eAAe,CAAE,SAAS,CAC1B,SAAS,CAAE,IAAI,CACf,WAAW,CAAE,IAAI",
+"mappings": "AAAA,EAAE,CACA,eAAe,CAAE,IAAI,CACrB,MAAM,CAAE,SAAS,CACjB,OAAO,CAAE,CAAC,CAGV,gBAAgB,CAAE,qBAAsB,CACxC,MAAM,CAAE,iBAAiB,CACzB,OAAO,CAAE,YAAY,CACrB,UAAU,CAAE,QAAQ,CACpB,UAAU,CAAE,uDAA4D,CAExE,QAAO,CACL,MAAM,CAAE,IAAI,CAEhB,EAAE,CACA,KAAK,CAAE,IAAI,CACX,KAAK,CAAE,IAAI,CAGX,MAAM,CAAE,OAAO,CAGf,aAAa,CAAE,GAAG,CAElB,IAAC,CACC,OAAO,CAAE,KAAK,CACd,KAAK,CAAE,OAAO,CACd,UAAU,CAAE,MAAM,CAClB,OAAO,CAAE,QAAQ,CACjB,eAAe,CAAE,IAAI,CACrB,MAAM,CAAE,SAAS,CACjB,WAAW,CAAE,IAAI,CAErB,SAAa,CACX,KAAK,CAAE,KAAK,CAGZ,6CAAoC,CAClC,UAAU,CAAE,IAAI,CAChB,KAAK,CAAE,GAAG,CACV,eAAe,CAAE,SAAS,CAE5B,iCAA0B,CACxB,UAAU,CAAE,EAAE,CACd,SAAS,CAAE,UAAU,CAEzB,WAAW,CACT,OAAO,CAAE,YAAY,CAEvB,QAAQ,CACN,UAAU,CAAE,MAAM,CAClB,QAAQ,CAAE,QAAQ,CAClB,UAAU,CAAE,IAAI,CAChB,WAAW,CAAE,KAAK,CAClB,gBAAgB,CAAE,IAAkB,CAEpC,WAAE,CAOA,OAAO,CAAE,KAAK,CACd,KAAK,CAAE,IAAI,CACX,aAAa,CAAE,iBAAmB,CAClC,MAAM,CAAE,OAAO,CATf,aAAC,CACC,OAAO,CAAE,KAAK,CACd,KAAK,CAAE,IAAI,CACX,aAAa,CAAE,iBAAmB,CAClC,MAAM,CAAE,OAAO,CAOrB,cAAc,CACZ,UAAU,CAAE,OAAO,CAErB,eAAuB,CACrB,MAAM,CAAE,MAAM,CCzEhB,cAAc,CACV,UAAU,CCDL,IAAI,CDET,KAAK,CAAE,IAAK,CAIZ,aAAK,CACD,OAAO,CAAE,YAAY,CCD7B,IAAI,CACA,UAAU,CAAE,MAAM,CAClB,gBAAgB,CAAE,qCAAqC,CACvD,eAAe,CAAE,GAAG,CAExB,MAAM,CACF,MAAM,CAAE,IAAI,CAEZ,gBAAgB,CAAE,yCAAyC,CAC3D,eAAe,CAAE,IAAI,CACrB,mBAAmB,CAAE,MAAM,CAC3B,iBAAiB,CAAE,SAAS,CAC5B,QAAQ,CAAE,MAAM,CAChB,UAAU,CAAE,GAAG,CACf,YAAY,CAAE,OAAO,CACrB,YAAY,CAAE,GAAG,CACjB,YAAY,CAAE,KAAK,CACnB,UAAU,CAAE,MAAM,CAClB,OAAO,CAAE,IAAI,CACb,UAAU,CAAE,uCAAwC,CAEpD,SAAE,CACE,KAAK,CAAE,GAAG,CACV,eAAe,CAAE,SAAS,CAC1B,SAAS,CAAE,IAAI,CACf,WAAW,CAAE,IAAI",
 "sources": ["../sass/_nav.sass","../sass/_home.sass","../sass/style.sass"],
 "names": [],
 "file": "style.css"

index.php

@@ -7,8 +7,9 @@ if ($tab == "") {$tab = "home";}
 <html>
 
 <head>
-    <title>Weihnachts Kalender Melly</title>
+    <title>Mellys Weihnachts Kalender</title>
     <meta charset="UTF-8">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
     <link rel="stylesheet" type="text/css" href="css/style.css">
     <script src="js/nav.js"></script>
 	  <meta name="viewport" content="width=device-width, initial-scale=0.7">
@@ -16,7 +17,7 @@ if ($tab == "") {$tab = "home";}
 
     <header>
         <h1>
-              Weihnachts Kalender Melly 
+              Mellys Weihnachts Kalender
         </h1>
     </header>
      <nav id="nav">

sass/_home.sass

@@ -1,11 +1,8 @@
-.home
+.TimeContainer
     margin-top: $navtop
-    color: red
+    color: black
-    font-size: 30px
-    font-weight: bold
     
-    h1
+#clockdiv
-        margin-top: $txttop
+
-        color: blue
+    > div
-        font-weight: normal 
+        display: inline-block
-        font-size: 15px 

sass/_nav.sass

@@ -8,7 +8,7 @@ ul
   border: 2px solid darkred
   display: inline-block
   transition: all 60ms
-  box-shadow: inset -2px -2px 5px lightblue, inset 2px 2px 5px lightblue
+  box-shadow: inset -2px -2px 10px lightblue, inset 2px 2px 10px lightblue
 
   &.navUl
     height: 33px

sass/style.sass

@@ -6,14 +6,15 @@ $txttop: 5px
 
 body
     text-align: center
-    background-image: url("../inc/bg/th.png")
+    background-image: url("../inc/bg/simple-snowflake.png")
-    background-color: #c1ccff
+    background-size: 20%
 
 header
     margin: auto
     /*background-color: Lightgrey
-    background-image: url("../inc/bg/banner1.jpg")
+    background-image: url("../inc/bg/christmas background.jpg")
     background-size: 100%
+    background-position: 0% 88%
     background-repeat: no-repeat
     overflow: hidden
     margin-top: 3px
@@ -25,8 +26,8 @@ header
     box-shadow: -1px -1px 5px silver, 1px 1px 5px silver
 
     h1
-        margin-left: 80px
+        color: red
-        color: gold
         text-decoration: underline
-        font-size: 20px
+        font-size: 30px
         font-weight: bold
+        

tab/home.php

@@ -1,8 +1,160 @@
-<div class="home">
+<div class="TimeContainer">
-    test 
+    <div id="clockdiv">
+        <div>
+            <span class="countdownNummer" id="day"></span>
+            <div class="smalltext">Tage</div>
+        </div>
+        <div>
+            <span class="ountdownNummer" id="hour"></span>
+            <div class="smalltext">Stunden</div>
+        </div>
+        <div>
+            <span class="ountdownNummer" id="minute"></span>
+            <div class="smalltext">Minuten</div>
+        </div>
+        <div>
+            <span class="ountdownNummer" id="second"></span>
+            <div class="smalltext">Sekunden</div>
+        </div>
+    </div>
+    <br />
+    <div id="messagebox">
+        <img id="imgmessage">
+		<br>
+    </div>
+</div>
+
+    <script>
     
-    <div><h1>
+    <?php
-        test 2
+        include "list.php";
-    </h1></div>
+        $js_array = json_encode($images);
-    
+        echo "var images = ".$js_array.";\n"; 
-</div>
+        $js_array = json_encode($videos);
+        echo "var videos = ".$js_array.";\n"; 
+    ?>
+    console.log(images);
+    var deadline = new Date("12 1, 2021 00:00:01").getTime();
+
+    var x = setInterval(function() {
+
+        var now = new Date().getTime();
+        var t = deadline - now;
+        var days = Math.floor(t / (1000 * 60 * 60 * 24));
+        var hours = Math.floor((t % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+        var minutes = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60));
+        var seconds = Math.floor((t % (1000 * 60)) / 1000);
+
+        // Teste datum
+
+        document.getElementById("day").innerHTML = days;
+        document.getElementById("hour").innerHTML = hours;
+        $("#minute").html(minutes);
+        $("#second").html(seconds);
+
+        if (days == 0) {
+            $("#day").parent().hide();
+            if (hours == 0) {
+                $("#hour").parent().hide();
+                if (minutes == 0) {
+                    $("#minute").parent().hide();
+                    $("#second").parent().addClass("pulsieren")
+                    $("#second ~ div").hide();
+                    $("#textmessage").hide();
+                }
+            }
+        }
+
+        if (days > 0) {
+            textmessage = "Noch " + days + " Mal Schlafen, dann ist es soweit.";
+        }
+    /*   if (days == 30) {
+            extmessage = "Was schon 30. Nein, dafür ist noch Zeit,<br>30 Tage noch, bis zu dein Tag";
+        }
+			if (days <= 28) {
+            textmessage =
+                "Heller als die Sonnen scheinst du allein,<br> selbst Mond und Sterne verneigen sich,<br>Weil du Geburtstag hast";
+        }
+		if (days <= 26) {
+            textmessage ="...";
+        }
+        if (days <= 24) {
+        	textmessage="";
+            $("#imgmessage").attr("src", "img/txt1.jpg").show();
+        }
+        if (days <= 22) {
+            textmessage = "Jeder, der sich die Fähigkeit erhält,<br> Schönes zu erkennen, wird nie alt werden.";
+        }
+        if (days <= 20) {
+            textmessage =
+                "Frohsinn und Glück, Liebe und Spaß,<br> Tage ohne Stress und Freude ohne Kummer,<br> das wünschen wir dir heute und für immer.";
+        }
+        if (days <= 18) {
+            textmessage =
+                "Heute denke ich an dich, weil du Geburtstag hast.<br> Morgen denke ich an dich, weil ich dich mag.<br> In einer Woche denke ich an dich, weil ich dich vermisse.<br> In einem Monat denke ich an dich,<br> weil ich froh bin, dass du da bist.<br> So denke ich immer an dich, nicht nur heute.";
+        }
+        if (days <= 16) {
+            textmessage = "Bleib gesund und stets vergnügt,<br> weil uns das sehr am Herzen liegt";
+        }
+        if (days <= 14) {
+            textmessage =
+                "Ich wünsche dir 12 Monate Glück, 52 Wochen Zufriedenheit,<br> 365 Tage voller Liebe, 8.760 Stunden ohne Stress,<br> 525.600 Minuten Frohsinn und<br> 31.536.000 Sekunden mit deinen Liebsten.<br> Kurz gesagt: ein unvergleichbares Jahr!";
+        }
+        if (days <= 12) {
+            textmessage =
+                "Feiere jeden Geburtstag als ob es der letzte wäre und bedenke,<br> daß Liebe das einzige Geschenk ist,<br> das wirklich die Mühe wert ist, zu geben.";
+        }
+        if (days <= 10) {
+            textmessage = "Mögest du alle Tage deines Lebens, freude und glück haben.";
+        }
+        if (days <= 8) {
+            textmessage = "Geburtstagsfunken und Kerzenschein,<br>leuchtend soll dein Geburtstag sein!";
+        }
+        if (days <= 6) {
+            textmessage = "Und wieder mal wirst du nur so alt,<br> wie du dich fühlst!";
+        }
+        if (days <= 4) {
+            textmessage =
+            "Wer alle Kerzen mit einem Atemzug ausbläst,<br>wird auch noch unzählige weitere tun!";
+        }
+        if (days == 3) {
+            textmessage = "Noch 3 mal Schlafen dan ist es so weit!";
+        }
+        if (days <= 0) {
+            textmessage = "Der letzte Tag hat begonnen";
+            if (hours <= 12) {
+                textmessage = "Die Häfte vom Tag ist Geschaft";
+            }
+            if (hours <= 6) {
+                textmessage = "Die Letzten Stunden laufen";
+            }
+            if (hours <= 3) {
+                textmessage = "Bald ist es soweit";
+            }
+            if (hours <= 1) {
+                textmessage = "Eine Stunde noch und wir lassen es Krachen";
+            }
+        }
+        if (hours == 0) {
+            if (minutes <= 30) {
+                textmessage = "30 min ist keine Ewigkeit, ist alles Vorbereitet?";
+            }
+            if (minutes <= 10) {
+                textmessage = "Füllt die Gläser mit Sekt";
+            }
+            if (minutes <= 5) {
+                textmessage = "Haltet euch bereit,<br> für den Großen Moment!";
+            }
+        }*/
+
+        document.getElementById("textmessage").innerHTML = textmessage;
+        if (t <= 0) {
+            clearInterval(x);
+            $("#clockdiv").hide();
+            $("#messagebox").hide();
+            $("header b").html("Frohe Weihnachten!!!")
+            imageLoopFunc();
+            
+        }
+    }, 1000);
+    </script>